对导航后退按钮做出反应以返回到spalsh屏幕

Question

我想在react本机项目中使用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,
    }
});