Question

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

我发现很多嵌套在堆栈或抽屉中的制表符示例，而不是嵌套在标签中的堆栈示例！

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

TabNavigator: 
 - Settings Screen (Tab 1)
       -About Us (Button when clicked opens up the About Us Screen)
       -Account Settings (Button when clicked opens up the About Us Screen)
       -Contact Us (Button when clicked opens up the About Us Screen)
 - Search Screen (Tab 2)
 - Profile Screen (Tab 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

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

访问：- Stack Navigator for each Tab

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

TabNavigator内是否可以使用StackNavigator？

2 个答案: