无法在react Native中React导航下的Tab Navigator中呈现图像

npm install react-navigation react-navigation-tabs react-native-reanimated react-native-gesture-handler

import React from 'react';
import { View, Image, Text } from 'react-native';

const CustomTabBar = ({ state, descriptors, navigation }) => {
  return (
    <View style={{ flexDirection: 'row' }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label = options.tabBarLabel;
        const isFocused = state.index === index;

        // 自定义Tab Bar项的图像和文本
        let icon;
        if (label === 'Home') {
          icon = isFocused ? require('./images/home_active.png') : require('./images/home_inactive.png');
        } else if (label === 'Profile') {
          icon = isFocused ? require('./images/profile_active.png') : require('./images/profile_inactive.png');
        }

        return (
          <TouchableOpacity
            key={index}
            onPress={() => navigation.navigate(route.name)}
            style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}
          >
            <Image source={icon} style={{ width: 24, height: 24 }} />
            <Text style={{ color: isFocused ? 'blue' : 'black' }}>{label}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
};

export default CustomTabBar;

import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import CustomTabBar from './CustomTabBar';

const Tab = createBottomTabNavigator();

const App = () => {
  return (
    <Tab.Navigator tabBar={props => <CustomTabBar {...props} />}>
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Profile" component={ProfileScreen} />
    </Tab.Navigator>
  );
};

export default App;