在选项卡导航器中添加堆栈导航器

Question

我想添加 TrackList 屏幕以导航到 TrackDetail。我有这样的，但我知道有一个问题。我似乎不知道如何将该功能添加到曲目列表中。

<Tab.Navigator>
        <Stack.Navigator>
          <Stack.Screen name="TrackList" component={TrackListScreen} />
          <Stack.Screen name="TrackDetail" component={SigninScreen} />
        </Stack.Navigator>
        <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
        <Tab.Screen name="Account" component={AccountScreen} />
</Tab.Navigator>

Answer 1

Tab.Navigator 内只能有 Tab.Screen 个元素。所以，首先将你的堆栈包装到另一个组件中。例如，像这样创建堆栈组件：

    const TrackListStack = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen name="TrackList" component={TrackListScreen} />
          <Stack.Screen name="TrackDetail" component={SigninScreen} />
        </Stack.Navigator>
      );
    };

并将组件添加到您的导航器中：

    <Tab.Navigator>
      <Tab.Screen name="TrackListStack" component={TrackListStack} />
      <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>

Answer 2

你不能。一个合适的方法是使用这种方式

<Tab.Navigator>
        <Tab.Screen name="TabListScreen" component={TabListScreen} />
        <Tab.Screen name="AnotherTabListScreen" component={AnotherTabListScreen} />
</Tab.Navigator>


<Stack.Navigator
  initialRouteName="TabNavigator">
  <Stack.Screen name="TabNavigator" component={TabNavigator} />
  <Stack.Screen name="ScreenDetail" component={ScreenDetail} />
</Stack.Navigator>

Answer 3

您不能将 Stack 元素包装到 Tab 导航中，您需要为 Stack navigation 创建单独的 function 并且您可以添加此 Stacknavigation在选项卡导航中发挥作用，例如：-

 const StackNavigation = () => {
      return (
        <Stack.Navigator>
          <Stack.Screen name="TrackList" component={TrackListScreen} />
          <Stack.Screen name="TrackDetail" component={SigninScreen} />
        </Stack.Navigator>
      );
    };

    <Tab.Navigator>
      <Tab.Screen name="TrackListStack" component={StackNavigation} />
      <Tab.Screen name="TrackCreate" component={TrackCreateScreen} />
      <Tab.Screen name="Account" component={AccountScreen} />
    </Tab.Navigator>

在选项卡导航器中添加堆栈导航器

Add a stack navigator inside a tab navigator

reactjs

react-native

ecmascript-6