如何同时使用堆栈和选项卡导航

Question

您好，我是反应本机和特别是反应导航的新手。我被困在一件简单的事情上，同时使用选项卡导航器和堆栈导航器。我可以一次使用一个，但不能同时使用两者。我没有完全理解反应导航文档。这就是我正在做的事情：

我的导航文件：首先是我的堆栈导航器：

const Stack = createStackNavigator()
 export default function MyStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Profile" component={Profile}/>
                <Stack.Screen name="Home" component={Home}/>
                <Stack.Screen name="MachinesList" component={MachinesList}/>
                <Stack.Screen name="Size" component={Size}/>
                <Stack.Screen name="Weight" component={Weight}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

然后是我的选项卡导航器：

const Tab = createBottomTabNavigator()

export function TabNavigator(){
    return(
            <Tab.Navigator>
                <Tab.Screen name='Profile' component={Profile}/>
                <Tab.Screen name='Home' component={Home}/>
                <Tab.Screen name='MachinesList' component={MachinesList}/>
            </Tab.Navigator>
    )
}

以下是我尝试将导航放入 App.js 中的方法：

 return (
      <Provider store={store}>
          <MyStack />
      </Provider>

Answer 1

您需要定义哪些屏幕位于哪些选项卡中。目前，您有三个选项卡，其中包含全部位于同一堆栈上的屏幕。

通常，其工作原理如下。

• 定义带有n选项卡的选项卡导航器
• 定义n堆栈
• 将每个堆栈分配给相应的选项卡
• 将屏幕分配给他们stacks

在您的情况下，这看起来如下。

const Tab = createBottomTabNavigator()

export function TabNavigator() {
  return (
        <Tab.Navigator>
           <Tab.Screen name='Profile' component={ProfileStack}/>
           <Tab.Screen name='Home' component={HomeStack}/>
           <Tab.Screen name='MachinesList' component={MachineListStack}/>
        </Tab.Navigator>
   )
}

然后HomeStack看起来如下。

const Stack = createStackNavigator()
const HomeStack = () => {
   
    return (
      <Stack.Navigator initialRouteName="HomeScreen">
         <Stack.Screen name="HomeScreen" component={HomeScreen} />
         // Any additional screens located inside the stack of the tab Home
      </Stack.Navigator>
    )
}

对所有其他堆栈执行相同的操作。现在，您拥有三个选项卡和三个堆栈。您可以根据需要在每个堆栈中嵌套任意多个屏幕。

然后在您的主应用程序中初始化TabNavigator.

export default function App() {

return (
    <NavigationContainer>
       <TabNavigator />
     </NavigationContainer>
  );
}

Answer 2

您需要将 TabNavigator 添加为 Stack.Navigator 中的 Stack.Screen。

const Stack = createStackNavigator()
 export default function MyStack() {
    return (
        <NavigationContainer>
            <Stack.Navigator screenOptions={{headerShown: false}}>
                <Stack.Screen name="Profile" component={TabNavigator}/>
                <Stack.Screen name="Home" component={Home}/>
                <Stack.Screen name="MachinesList" component={MachinesList}/>
                <Stack.Screen name="Size" component={Size}/>
                <Stack.Screen name="Weight" component={Weight}/>
            </Stack.Navigator>
        </NavigationContainer>
    )
}

您现在可以看到 Profile Stack.Screen 正在使用 TabNavigator。