Stack Navigator内的ReactNative- Tab Navigator

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

您的堆栈应按以下所示进行更改

<NavigationContainer>
      <Stack.Navigator initialRouteName="Welcome" headerMode="none">
        !isSingedIn?
        {<>
            <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.Screen name="ResetPassword" component={HomeScreen} />
            }:
          </>
        }
      </Stack.Navigator>
    </NavigationContainer>

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

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