reactjs - 如何在 React-native 的其他文件中导航到其他导航器中的页面？

Question

我和一些人制作了一个带有 react native 的应用来练习，后来发现我们使用了两个不同的导航器。

我试图结合但失败了，并试图谷歌但找不到任何令人满意的答案。

我只想在退出后打电话给 SplashScreen。

所以这里是初始屏幕的代码，包括 Auth aka SplashScreen：

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

import Auth from './../screens/Auth'

...

import Welcome from './../screens/Welcome'
import MainApp from './MainApp' //this contains signout page

const Stack = createNativeStackNavigator();

const RootStack = () => {
    return(
        <NavigationContainer>
            <Stack.Navigator
                screenOptions={{
                    headerShown:false}
                }}
                initialRouteName="Auth"
            >
                <Stack.Screen name= "Auth" component={Auth} />
                
                ... 

                <Stack.Screen />
                <Stack.Screen name="MainApp" component={MainApp}/>
            </Stack.Navigator>
        </NavigationContainer>
    )

这是包含我的信息和注销的代码：

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';


const Stack=createStackNavigator()

const HomeScreenOptions={
  headerStyle:{backgroundColor:'lightblue'},
  headerTitleStyle:{color:'black', justifyContent:'center'},
  headerTintColor:'white',
}
const Tabs = createBottomTabNavigator();

const YourwordsStack = createStackNavigator();
const HomeStack = createStackNavigator();
const MyInfoStack = createStackNavigator();

const YourwordsStackScreen =()=>(
  <YourwordsStack.Navigator screenOptions={HomeScreenOptions}>
    <YourwordsStack.Screen name="Yourwords" component={YourwordsScreen}/>
  </YourwordsStack.Navigator>
)

const HomeStackScreen =()=>(
  <HomeStack.Navigator 
    screenOptions={HomeScreenOptions}
  >
    <HomeStack.Screen name="Home" component={HomeScreen} />
    <HomeStack.Screen name="Yourwords" component={YourwordsScreen} />
    <HomeStack.Screen name="Mywords" component={MywordsScreen}/>
  </HomeStack.Navigator>
)

const MyInfoStackScreen =()=>(
  <MyInfoStack.Navigator screenOptions={HomeScreenOptions}>
    <MyInfoStack.Screen name="MyInfo" component={MyInfoScreen}/> // this page needs to be connected with Auth
    <MyInfoStack.Screen name="MyWordsHistory" component={MyWordsHistory}/>
    <MyInfoStack.Screen name="MyMessages" component={MyMessages}/>
  </MyInfoStack.Navigator>
)

export default function MainApp({navigation}) {
  return (
    <NavigationContainer independent={true}>
      <Tabs.Navigator 
        initialRouteName="HomeTab"
        screenOptions={{
        tabBarHideOnKeyboard:true,
        tabBarStyle:[
          {
            display:'flex'
          },
          null
        ]
        }}
      >
        <Tabs.Screen 
          name="YourwordsTab" 
          component={YourwordsStackScreen}  
          options={{
            headerShown:false,
          }}
        />
        <Tabs.Screen 
          name="HomeTab" 
          component={HomeStackScreen} 
          options={{
            headerShown:false,
          }}
        />
        <Tabs.Screen 
          name="MyInfoTab" 
          component={MyInfoStackScreen}  
          options={{
            headerShown:false,
          }}
        />
      </Tabs.Navigator>
    </NavigationContainer>
  )
}

所以第一个问题是我们使用了不同的导航器，第二个问题是我们不能真正通过不同的文件将一个页面链接到另一个页面。

我该如何解决这个问题？

标签： reactjsreact-nativenavigator