嵌套导航时将堆栈与组重用

Question

使用 React Navigation 6，在文档中，他们建议您使用组来最小化嵌套导航器。

但是，我不确定如何在本示例中执行此操作，在选项卡导航器中使用嵌套堆栈：

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

function FeedScreen({ navigation }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />
    </View>
  );
}

function ProfileScreen() {
  return <View />;
}

function SettingsScreen() {
  return <View />;
}

const FeedStack = createNativeStackNavigator();

function FeedStackScreen() {
  return (
    <FeedStack.Navigator>
      <FeedStack.Screen name="Feed" component={FeedScreen} />
      {/* other screens */}
    </FeedStack.Navigator>
  );
}

const ProfileStack = createNativeStackNavigator();

function ProfileStackScreen() {
  return (
    <ProfileStack.Navigator>
      <ProfileStack.Screen name="Profile" component={ProfileScreen} />
      {/* other screens */}
    </ProfileStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Feed" component={FeedStackScreen} />
      <Tab.Screen name="Profile" component={ProfileStackScreen} />
    </Tab.Navigator>
  );
}

const RootStack = createNativeStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <RootStack.Navigator>
        <RootStack.Screen
          name="Home"
          component={HomeTabs}
          options={{ headerShown: false }}
        />
        <RootStack.Screen name="Settings" component={SettingsScreen} />
      </RootStack.Navigator>
    </NavigationContainer>
  );
}

当我重用堆栈时，选项卡导航器中只使用一个堆栈，它仍然有效：

const TabStack = createNativeStackNavigator();

function FeedStackScreen() {
  return (
    <TabStack.Navigator>
      <TabStack.Screen name="Feed" component={FeedScreen} />
      {/* other screens */}
    </TabStack.Navigator>
  );
}

function ProfileStackScreen() {
  return (
    <TabStack.Navigator>
      <TabStack.Screen name="Profile" component={ProfileScreen} />
      {/* other screens */}
    </TabStack.Navigator>
  );
}

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <Tab.Screen name="Feed" component={FeedStackScreen} />
      <Tab.Screen name="Profile" component={ProfileStackScreen} />
    </Tab.Navigator>
  );
}

但是，当我尝试像这样使用 Group 时：

const TabStack = createNativeStackNavigator();

function FeedStackScreen() {
  return (
    <TabStack.Group>
      <TabStack.Screen name="Feed" component={FeedScreen} />
      {/* other screens */}
    </TabStack.Group>
  );
}

function ProfileStackScreen() {
  return (
    <TabStack.Group>
      <TabStack.Screen name="Profile" component={ProfileScreen} />
      {/* other screens */}
    </TabStack.Group>
  );
}

const Tab = createBottomTabNavigator();

function HomeTabs() {
  return (
    <Tab.Navigator screenOptions={{headerShown: false}}>
      <TabStack.Navigator>
        <Tab.Screen name="Feed" component={FeedStackScreen} />
        <Tab.Screen name="Profile" component={ProfileStackScreen} />
      </TabStack.Navigator>
    </Tab.Navigator>
  );
}

我收到错误是a navigator can only contain 'screen' 'group' or 'react.fragment'因为如果不将导航器写入component.

有没有办法在这里使用组或者是<TabStack.Navigator></TabStack.Navigator>为每个“组”编写的正确方法？

Answer 1

这里的问题是，这Group是由navigator. 如果我们创建一个返回该组的 JSX 组件，那么从技术上讲，这不再是一个GroupJSX 组件，而是它自己的 JSX 组件。

这是一个未解决的问题，并在这个 GitHub 问题中react-native-navigation进行了讨论，但除了丑陋的 hack 之外，显然没有令人满意的解决方案。

我们可以内联调用功能组件。

function CustomGroupComponent() {
  return <Tab.Group>
          <Tab.Screen ... />
          <Tab.Screen ... />
      </Tab.Group>
}

export const Tabs = (props) => {

  return (

     <Tab.Navigator ...>
         <Tab.Screen ...>
         {CustomGroupComponent()}
     </Tab.Navigator>
  )
}

综上所述，没有很好的解决方案。诀窍是使用 来调用函数组件作为内联函数{CustomGroupComponet()}。

备注：我认为这是一种反模式，但就我而言，当前版本中没有其他解决方案。