TabNavigator内是否可以使用StackNavigator？

Question

我已经使用createMaterialTopTabNavigator创建了一个自定义标签导航器，但是在其中一个标签中，我想创建一个StackNavigator。这可能吗？

我发现很多嵌套在堆栈或抽屉中的制表符示例，但没有嵌套在选项卡中的堆栈示例！

本质上，我想在“选项卡屏幕”之一上具有一些按钮，这些按钮可以导航到其他一些屏幕，但我不想从“选项卡”中导航。（初始选项卡始终可见/选中）-只需单击一个按钮，然后转到另一个屏幕，然后返回即可。

TabNavigator： 
 -设置屏幕（选项卡1）
       -关于我们（单击按钮会打开“关于我们”屏幕）
       -帐户设置（单击按钮可打开“关于我们”屏幕）
       -联系我们（单击按钮可打开“关于我们”屏幕）
 -搜索屏幕（标签2）
 -个人资料屏幕（标签3）

如果有任何建议，将不胜感激！:)

Answer 1

是的，你可以这样做

您可以通过执行以下操作将StackNavigator嵌套在TabNavigator中-

import { TabNavigator, StackNavigator } from 'react-navigation'

export const TabNavigator = TabNavigator({
    SettingsScreenStack: { screen: SettingsScreenStack },
    SearchScreen: { screen: SearchScreen },
    ProfileScreen: { screen: ProfileScreen },
  }, {
    order: ['SettingsScreenStack', 'SearchScreen', 'ProfileScreen'],
    initialRouteName: 'SettingsScreenStack',
});

export const SettingsScreenStack = StackNavigator({
    AboutUsScreen: { screen: AboutUsScreen },
    AccountSettingsScreen: { screen: AccountSettingsScreen },
    ContactUsScreen: { screen: ContactUsScreen },
  }, {
    initialRoute: 'AboutUsScreen',
})

...

希望能有所帮助。

Answer 2

是的，您可以将 StackNavigator 嵌套在 TabNavigator 中

访问：-每个选项卡的堆栈导航器

    import * as React from 'react';
    import { Button, Text, View } from 'react-native';
    import { NavigationContainer } from '@react-navigation/native';
    import { createStackNavigator } from '@react-navigation/stack';
    import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

    function DetailsScreen() {
      return (
       /* content */
      );
    }

    function HomeScreen({ navigation }) {
      return (
       /* content */
      );
    }

    function SettingsScreen({ navigation }) {
      return (
       /* content */
      );
    }

    const HomeStack = createStackNavigator();

    function HomeStackScreen() {
      return (
        <HomeStack.Navigator>
          <HomeStack.Screen name="Home" component={HomeScreen} />
          <HomeStack.Screen name="Details" component={DetailsScreen} />
        </HomeStack.Navigator>
      );
    }

    const SettingsStack = createStackNavigator();

    function SettingsStackScreen() {
      return (
        <SettingsStack.Navigator>
          <SettingsStack.Screen name="Settings" component={SettingsScreen} />
          <SettingsStack.Screen name="Details" component={DetailsScreen} />
        </SettingsStack.Navigator>
      );
    }

    const Tab = createBottomTabNavigator();

    export default function App() {
      return (
        <NavigationContainer>
          <Tab.Navigator>
            <Tab.Screen name="Home" component={HomeStackScreen} />
            <Tab.Screen name="Settings" component={SettingsStackScreen} />
          </Tab.Navigator>
        </NavigationContainer>
      );
    }