Reactjs react-native中的堆栈导航

为了创建我的应用程序，我遵循了一些教程，并创建了以下堆栈导航器：

  const AppStack = createStackNavigator();
    const [user] =useContext(UserContext)

    return (
        <AppStack.Navigator headerMode="none">
            {user.isLoggedIn === null ? (
            <AppStack.Screen name="Loading" component={LoadingScreen} />

            ) : user.isLoggedIn ? (
            <AppStack.Screen name="Main" component={MainStackScreen} />

            ) : (
            <AppStack.Screen name="Auth" component={AuthStackScreen} />
            
            ) 
            }
        </AppStack.Navigator>
    );

const-AppStack=createStackNavigator（）；
const[user]=useContext（UserContext）
返回(
{user.isLoggedIn===null(
)：user.isLoggedIn(
) : (
) 
}
);

加载屏幕将在第一秒出现

MainStackScreen是另一个屏幕，其中我有一个底部选项卡导航器和主屏幕

    const MainStack = createBottomTabNavigator()
       <MainStack.Navigator tabBarOptions={tabBarOptions} screenOptions={screenOptions}>
            <MainStack.Screen name="Exercises" component={**ExercisesScreen**} />
            <MainStack.Screen name="Measurements" component={MeasurementsScreen} />
            <MainStack.Screen name="Workout" component={MeasurementsScreen} />
            <MainStack.Screen name="Progresses" component={ProgressesScreen} />
            <MainStack.Screen name="Profile" component={ProfileScreen} />
        </MainStack.Navigator>  

const-MainStack=createBottomTabNavigator（）

AuthStackScreen是另一个屏幕，其中我有另一个包含注册和登录屏幕的堆栈导航器

 const AuthStack = createStackNavigator()

    return (
        <AuthStack.Navigator headerMode="none">
            <AuthStack.Screen name="SignIn" component={SignInScreen}/>
            <AuthStack.Screen name="SignUp" component={SignUpScreen}/>
        </AuthStack.Navigator>
    );

const AuthStack=createStackNavigator（）
返回(
);

但是，如果我想创建其他屏幕以从练习屏幕或其他屏幕导航，该怎么办？

---

我需要创建另一个导航器来处理它们，但我不知道如何将其插入我创建的这些导航中。

我这样解决了它，在主导航器中，我用FirstScreenNavigator替换了ExercisesScreen

       <MainStack.Screen name="Exercises" component={FirstScreenNavigator} />

我创建了一个FirstScreenNavigator.js，其中包含

const FirstScreenNavigator = () => {
    return(
        <Stack.Navigator>
            <Stack.Screen 
                name="Screen1"
                component={Screen1}
            />
            <Stack.Screen
                name="Screen2"
                component={Screen2}
            />
        </Stack.Navigator>
    )
}
export {FirstScreenNavigator}

const FirstScreenNavigator=（）=>{
返回(
)
}
导出{FirstScreenNavigator}

现在，当我在BottomTabNavigator上打开ExercisesScreen时，我可以轻松导航到添加到FirstScreenNavigator.js中的屏幕

---

非常感谢Bas Van Der Linden的建议

如果您在

练习屏幕

上，您可以导航到

MainStack

导航器中的其他屏幕。如果希望

练习

渲染另一个导航器，可以通过

MainStack.Screen

的

组件

道具传递该导航器组件，就像将导航器组件传递给

AuthStackScreen

和

MainStackScreen

一样。但MainStackScreen是底部选项卡导航器，这意味着，如果我向其添加另一个屏幕，它将显示在底部栏中，但我只想处理导航而不向下显示。您可以将一个引用附加到

导航容器

，并使用该引用从您想要的任何屏幕进行导航。您可能还想创建一个额外的导航器来放置另一个屏幕。或者您可以将其设置为

AppStack

的屏幕。