Question

注册模块后，需要显示“主页”模块的选项卡使用React导航

仅具有堆栈屏幕的工作代码

const Stack = createStackNavigator();
const Bottom = createBottomTabNavigator();
render() {
        return (
            <NavigationContainer>
              <Stack.Navigator initialRouteName="Welcome" headerMode='none' >
                <Stack.Screen name="Welcome" component={WelcomeScreen} 
                    options={{
                        title: '',
                        headerBackTitleVisible: false,
                        headerBackTitle: '',
                        headerShown: true
                      }}
                 />
                <Stack.Screen name="Login" component={LoginScreen} />
                <Stack.Screen name="Signup" component={SignupScreen} />
                <Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
              </Stack.Navigator>
            </NavigationContainer>
          );
    }

需要从SigninScreen按钮显示选项卡标签1：资讯主页：标签2：个人资料

尝试代码：

<Bottom.Navigator initialRouteName="Dashboard" >
                        <Bottom.Screen name="Dashboard" component={TabDashboard} />
                        <Bottom.Screen name="Profile" component={TabProfile} />
                    </Bottom.Navigator>

现在，我需要结合这两个代码块，以便可以导航到选项卡标签页将有更多导航

Answer 1

想法是将选项卡屏幕包装在组件内部，并有条件地将其添加到堆栈中。

const HomeScreen = () =>{
 return (
   <Bottom.Navigator initialRouteName="Dashboard" >
    <Bottom.Screen name="Dashboard" component={TabDashboard} />
     <Bottom.Screen name="Profile" component={TabProfile} />
   </Bottom.Navigator>
 );
}

您的堆栈应如下更改

render() {
        return (
            <NavigationContainer>
              <Stack.Navigator initialRouteName="Welcome" headerMode='none' >
                  {
                      this.state.isSignedIn ? (
                        <>
                          <Stack.Screen name="Welcome" component={WelcomeScreen} />
                          <Stack.Screen name="Login" component={LoginScreen} />
                          <Stack.Screen name="Signup" component={SignupScreen} />
                          <Stack.Screen name="ResetPassword" component={ResetPasswordScreen} />
                        </>
                       ) : (
                        <>
                          <Stack.Screen name="ResetPassword" component={HomeScreen} />
                        </>
                       )
                  }
              </Stack.Navigator>
            </NavigationContainer>
          );
    }

IsSignedIn可以是状态变量，也可以是您存储登录状态的变量

您可以参考身份验证流程 https://reactnavigation.org/docs/auth-flow

ReactNative- Tab Navigator内部堆栈导航器

1 个答案: