将导航返回按钮返回到初始屏幕

Question

我想在 react native 项目中使用 react 导航，但是当我在标题中使用此代码时，它会在每个屏幕中显示一些后退按钮，当我单击它时，它会返回到初始屏幕。如何使用反应导航和检查第一次启动然后去堆栈主页并在任何屏幕上显示返回按钮。这让我很困惑。

const TabNav=createBottomTabNavigator({
        Notification:{
            screen:Notif,
            navigationOptions: () => ({
                title:'',
                tabBarIcon: ({ tintColor }) => {
                    return (
                        <IconIonicons
                            name='ios-notifications'
                            size={40}
                            color={tintColor}
                        />
                    );
                },
                tabBarOptions: {
                    activeTintColor: '#000',
                }
            })
        },

        Home:{
            screen:Home3,
            navigationOptions: () => ({
                title:'',

                tabBarIcon: ({ tintColor }) => {
                    return (
                        <Image style={{ width: 40, height: 40,marginTop:'20%' }} source={Home}/>
                    );
                }

            })
        },
        User:{
            screen:ProfileScreen,
            navigationOptions: () => ({
                title:'',
                tabBarIcon: ({ tintColor }) => {
                    return (
                        <IconIonicons
                            name='ios-person'
                            size={40}
                            color={tintColor}
                        />
                    );
                },
                tabBarOptions: {
                    activeTintColor: '#000',
                }
            })

        },



    },
    {
        initialRouteName:"Home"
    },{
        header: null,
        headerMode: 'none',
    }
)

const StackHome = createStackNavigator({
    Tabs:{
        screen:TabNav
    },
    CardView:{
        screen:CardView,
    },
    Thumb:{
        screen:Thumb,
    },  Item:{
        screen:Item,
    },  Product:{
        screen:ProductScreen,
    },  Festivals:{
        screen:Festivals,
    } ,  Review:{
        screen:Review,
    } ,  Movie:{
        screen:Movie,
    } ,  Naghd:{
        screen:Naghd,

    } ,  Advertisment:{
        screen:Advertisment,
    } ,  Advertis:{
        screen:Advertis,
    },  CreateAd:{
        screen:CreateAd,
    },  Insta:{
        screen:Insta,
    },  Test:{
        screen:Test,
    },  ForoshRah:{
        screen:ForoshRah,
    },  Home2:{
        screen:Home2,
    },  Login:{
        screen:Login,
    },  Elan:{
        screen:Elan,
    },  Sabtenam:{
        screen:Sabtenam,
    },  sponser:{
        screen:sponsor,
    },Splash:{
        screen:Spalsh
    },Products:{
        screen:Products
    },
        initialRouteName : 'Home',
},{

    headerMode:'none',
        navigationOptions: {

            header: (props) => <ImageHeader {...props} />,

        }
    }

)

const RootNav = createStackNavigator({
    StackHome:{
      screen:StackHome
    },
    Splash:{
        screen:Spalsh
    },Login:{
        screen:Login
    },
},{
        initialRouteName : 'Splash',
        header: null,
});

Answer 1

你可以使用 React Navigation 的 SwitchNavigator。由于 SwitchNavigator 一次只能显示一个屏幕。默认情况下，它不处理返回操作，并且在您切换离开时将路由重置为默认状态。

请参考https://reactnavigation.org/docs/en/switch-navigator.html

Remove the **Splash** Screen from your **StackHome** StackNavigator
Alter your **RootNav** with Switch Navigator like below

// Uses SwitchNavigator
const RootNav = createSwitchNavigator({
    StackHome:{
      screen: StackHome
    },
    Splash:{
        screen: Splash
    },Login:{
        screen: Login
    },
},{
        initialRouteName : 'Splash'
});

您的 StackHome 包含一些堆栈导航器屏幕，您可以从那里设置导航选项以在标题中设置图像。你可以像下面这样设置。

const StackHome = createStackNavigator({
    CardView:{
        screen: CardView,
        navigationOptions: ({ navigation }) => ({
            headerTitleStyle: { flex: 1, fontWeight: 'normal', fontSize: 15, color: '#FFFFFF', fontFamily: 'DroidSans-Bold' },
            headerTintColor: "#2662b2",
            headerStyle: {
                backgroundColor: "#05BFFF",
            },
            headerRight:(<View><NotificationComponent navigation={navigation}/></View>)            
        })
    },
    Thumb:{
        screen: Thumb,
    },  Item:{
        screen: Item,
    }
});