React Native：矢量图标未渲染

Question

我目前正在关注 React Navigation 的 这篇文章 的教程，使用这些版本的包：

"@react-navigation/bottom-tabs": "^6.5.20",
"@react-navigation/native": "^6.1.17",

它们是这样导入的（除了下面我的代码中使用的 Ionicons 之外）：

import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

import Ionicons from 'react-native-vector-icons/Ionicons';

我使用的 Ionicon 库中的图标（如here所述，未在这部分代码中呈现（直接复制，仅对我的 3 个页面的实现进行轻微编辑）：

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({route}) => ({
          tabBarIcon: ({focused, color, size}) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'home'
                : 'home-outline';
            } else if (route.name === 'Appearance') {
              iconName = focused
                ? 'color-palette'
                : 'color-palette-outline';
            } else if (route.name === 'Quotes') {
              iconName = focused
                ? 'chatbox-ellipses'
                : 'chatbox-ellipses-outline';
            } else {
              // default if undefined:
              iconName = focused
                ? 'home'
                : 'home-outline';
            }
            
            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'blue',
          tabBarInactiveTintColor: 'gray',
        })}>
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Appearance" component={AppearanceScreen} />
        <Tab.Screen name="Quotes" component={QuotesScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

这是我在 Android 模拟器上看到的内容：

我尝试的是使用上述文章中的确切代码，如下所示：

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ focused, color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = focused
                ? 'ios-information-circle'
                : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list' : 'ios-list-outline';
            }

            // You can return any component that you like here!
            return <Ionicons name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: 'tomato',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={HomeScreen} />
        <Tab.Screen name="Settings" component={SettingsScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

但是，它们呈现为问号：

Answer 1

您必须安装react-native-vector-icons包并分别为iOS和Android平台做特殊的事情。