Question

所以我一直在看React Native Tab Navigation v5（https://reactnavigation.org/docs/tab-based-navigation）而且我似乎无法弄清楚如何同时具有选项卡导航器和堆栈导航器。

//react-native-gesture-handler at top according to reactnavigation.org/docs/
import 'react-native-gesture-handler';
import * as React from 'react';
import { View, Text } from 'react-native';

//npm packages
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

//pages
import login from './pages/login';
import main from './pages/main'; 
import page1 from './pages/page1';
import page2 from './pages/page2';
import page3 from './pages/page3';
import page4 from './pages/page4';
import page5 from './pages/page5';

const Stack = createStackNavigator();
const Tab = createBottomTabNavigator();

const TabStack = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={page1} />
        <Tab.Screen name="Page2" component={page2} />
      </Tab.Navigator>
  );
}

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" headerMode="none">
        <Stack.Screen name="Login" component={login} />
        <Stack.Screen name="Main" component={main} />
        <Stack.Screen name="page1" component={page1} />
        <Stack.Screen name="page2" component={page2} />
        <Stack.Screen name="page3" component={page3} />
        <Stack.Screen name="page4" component={page4} />
        <Stack.Screen name="page5" component={page5} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

这个想法是我希望能够在所有屏幕之间导航，但是我只想在某些屏幕上包含bottomTabNavigator。任何人都可以提示我如何在React Native中实现这一目标？

Answer 1

来自React导航5的文档

最简单的方法是将标签导航器嵌套在堆栈的第一个屏幕中，而不是将堆栈嵌套在标签导航器中

这是文档中的示例：

function HomeTabs() {
  return (
    <Tab.Navigator>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Feed" component={Feed} />
      <Tab.Screen name="Notifications" component={Notifications} />
    </Tab.Navigator>
  );
}

function App() {
  return (
    <Stack.Navigator>
      <Stack.Screen name="Home" component={HomeTabs} />
      <Stack.Screen name="Profile" component={Profile} />
      <Stack.Screen name="Settings" component={Settings} />
    </Stack.Navigator>
  );
}

在您的情况下，这会转换为将要显示选项卡栏的所有屏幕都放入TabStack：

const TabStack = () => {
  return (
      <Tab.Navigator>
        <Tab.Screen name="Page1" component={page1} />
        <Tab.Screen name="Page2" component={page2} />
      </Tab.Navigator>
  );
}

以及所有其他屏幕和堆栈导航器中的标签导航器

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Login" headerMode="none">
        <Stack.Screen name="Page1" component={TabStack}
        <Stack.Screen name="Login" component={login} />
        <Stack.Screen name="Main" component={main} />
        <Stack.Screen name="page3" component={page3} />
        <Stack.Screen name="page4" component={page4} />
        <Stack.Screen name="page5" component={page5} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

反应本机createStackNavigator和createBottomTabNavigator

1 个答案: