如何为React Navigation的Tab.Screen构建符合DRY原则的可复用组件？

你之前封装自定义组件报错是因为React Navigation 6对导航器直接子组件做了严格校验，仅支持Screen、Group、React.Fragment三种类型，哪怕你自定义组件内部返回Tab.Screen也无法通过校验。

要实现高度复用的Tab Screen配置，可通过配置生成函数+循环渲染的方式实现，完全满足你仅需传入少量参数即可使用的需求，同时解决动画失效问题：

步骤1：封装通用Tab配置生成函数 #

将重复的图标、监听逻辑全部封装在函数内，仅暴露必要的可配置参数：

// tabConfig.js
import { View, StyleSheet } from 'react-native';
import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';
import Animated from 'react-native-animated';
import { colors } from './你的样式配置路径';

const styles = StyleSheet.create({
  icon: {
    position: 'absolute',
    top: 20,
  }
});

// 入参可根据你的需求调整，动画值也支持外部传入
export const createTabScreen = ({ 
  name, 
  component, 
  iconName, 
  animatedToValue, 
  tabOffsetValue 
}) => {
  return {
    name,
    component,
    options: {
      tabBarIcon: ({ focused }) => (
        <View style={styles.icon}>
          <FontAwesome5 
            name={iconName} 
            size={20} 
            color={focused ? colors.red : colors.grey} 
          />
        </View>
      )
    },
    listeners: () => ({
      tabPress: (e) => {
        Animated.spring(tabOffsetValue, {
          toValue: animatedToValue,
          useNativeDriver: true,
        }).start();
      }
    })
  };
};

步骤2：配置路由数组+循环渲染 #

// 你的导航逻辑文件
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createTabScreen } from './tabConfig';
import { routes } from './你的路由常量路径';
import HomeScreen from './HomeScreen';
import SearchScreen from './SearchScreen';
import { tabOffsetValue, getWidth } from './你的动画配置路径';

const Tab = createBottomTabNavigator();

// 所有Tab仅需在此处配置参数即可，无需重复写业务逻辑
const tabConfigList = [
  createTabScreen({
    name: routes.HOME,
    component: HomeScreen,
    iconName: 'home',
    animatedToValue: 0,
    tabOffsetValue: tabOffsetValue
  }),
  createTabScreen({
    name: routes.SEARCH,
    component: SearchScreen,
    iconName: 'search',
    animatedToValue: getWidth(),
    tabOffsetValue: tabOffsetValue
  }),
  // 后续新增Tab直接在此处加配置项即可
];

export default function TabNavigator() {
  return (
    <Tab.Navigator screenOptions={tabOptions}>
      {tabConfigList.map((screenProps) => (
        <Tab.Screen 
          key={screenProps.name} 
          {...screenProps} 
        />
      ))}
    </Tab.Navigator>
  );
}

这样封装后完全符合DRY原则，也完全兼容React Navigation的校验规则，同时每个Tab的动画偏移值单独配置，不会出现动画失效问题。如果有额外的配置需求，仅需调整createTabScreen函数的入参和返回值即可。

内容的提问来源于stack exchange，提问作者GʀᴜᴍᴘʏCᴀᴛ