如何将React Navigation标签页独立为单独组件？

问题根源在于**Tab.Screen必须与包裹它的Tab.Navigator属于同一个createBottomTabNavigator实例**。你的HomeTab组件内部单独创建了新的Tab实例，导致它返回的Tab.Screen无法被父组件的Tab.Navigator识别，从而报错。

以下是两种可行的解决方式：

方法一：通过Props传递共用的Tab实例 #

修改HomeTab组件，移除内部的Tab实例创建逻辑，改为接收父组件传入的共用Tab实例：

// Tabs/Home.js
import React from 'react';
import Icon from 'react-native-vector-icons/AntDesign';
import {Home} from '../../../screens';

// 接收父组件传入的Tab实例
const HomeTab = ({ Tab }) => (
  <Tab.Screen
    name="Home"
    component={Home}
    options={{
      tabBarLabel: 'Home',
      tabBarIcon: ({color, size}) => (
        <Icon name="home" color={color} size={size} />
      ),
    }}
  />
);

export {HomeTab};

在父组件的TabNavigation中，将自身创建的Tab实例传递给HomeTab：

// TabNavigation.js
import * as React from 'react';
import {HomeTab} from './Tabs/Home';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const TabNavigation = () => (
  <NavigationContainer>
    <Tab.Navigator>
      {/* 传递共用的Tab实例 */}
      <HomeTab Tab={Tab} />
    </Tab.Navigator>
  </NavigationContainer>
);
export default TabNavigation;

方法二：抽离Tab配置为对象（更简洁） #

将Tab.Screen的配置项抽离成普通对象，在父组件中直接展开使用：

// Tabs/Home.js
import Icon from 'react-native-vector-icons/AntDesign';
import {Home} from '../../../screens';

// 抽离Tab的配置对象
export const HomeTabConfig = {
  name: 'Home',
  component: Home,
  options: {
    tabBarLabel: 'Home',
    tabBarIcon: ({color, size}) => (
      <Icon name="home" color={color} size={size} />
    ),
  },
};

父组件中直接展开配置对象渲染Tab.Screen：

// TabNavigation.js
import * as React from 'react';
import {HomeTabConfig} from './Tabs/Home';
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const TabNavigation = () => (
  <NavigationContainer>
    <Tab.Navigator>
      <Tab.Screen {...HomeTabConfig} />
    </Tab.Navigator>
  </NavigationContainer>
);
export default TabNavigation;

两种方式都能解决实例不兼容的问题，实现标签页代码的隔离。其中方法二更简洁，适合单个tab的配置抽离；方法一则适合需要封装多个tab逻辑的场景。

内容的提问来源于stack exchange，提问作者Ala Eddine Menai