首页 文章

反馈导航后退按钮回到spalsh屏幕

提问于
浏览
1

我想在反应原生项目中使用反应导航,但是当我在 Headers 中使用此代码时,它会在每个屏幕中显示一些后退按钮,当我点击它时会返回到启动画面 . 如何使用反应导航检查第一次启动然后转到堆栈回家并在任何屏幕显示后退按钮 . 非常混淆我 .

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,
});

1 回答

  • 0

    您可以使用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包含一些堆栈导航器屏幕,您可以从那里设置导航选项以在 Headers 中设置图像 . 您可以设置如下 .

    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,
        }
    });
    

相关问题