如何同时使用 Stack 和 Tab 导航

Question

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

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

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

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

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

您现在可以看到配置文件 Stack.Screen 正在使用 TabNavigator。

Answer 2

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

通常，其工作方式如下。

用 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 initialRoutName="HomeScreen">
         <Stack.Screen name="HomeScreen" component={HomeScreen} />
         // all other screens located inside the stack of the tab Home
      </Stack.Navigator>
    )
}

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

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

export default function App() {

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

如何同时使用 Stack 和 Tab 导航

How to use Stack and Tab navigation at same time

javascript

reactjs

react-native

react-redux