React Native- Tab Navigator Inside Stack Navigator

Question

需要在注册模块后显示主页模块的标签使用反应导航

只有堆栈屏幕的工作代码

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 按钮显示 Tab 选项卡 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

React Native- Tab Navigator Inside Stack Navigator

ReactNative- Tab Navigator Inside Stack Navigator

react-native

react-native-ios

react-navigation