react-navigation(5.x)新版本使用（四）之为底部标签栏添加图标

写作时间：2020/4/16
React-Native版本：0.62
React-Navigation版本：5.X
开发平台：macOS
目标平台：iOS

利用新版react-navigation(5.x)做一个底部标签栏，想给标签栏添加图标，按照官网的代码进行操作出现了一些问题，现将实现过程总结如下

1 在某个文件夹中创建一个新的React-Native项目

react-native init Init

2 进入项目并启动

cd Init
react-native run-ios

3 在Init文件目录下安装如下内容

npm install @react-navigation/native
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view
npm install @react-navigation/bottom-tabs

4 打开VSCode，删除原App.js中的内容，换成如下代码

import * as React from 'react';
import { Text, View } from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { NavigationContainer } from '@react-navigation/native';

function HomeScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Home!</Text>
    </View>
  );
}

function SettingsScreen() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Settings!</Text>
    </View>
  );
}

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 ? 'ios-information-circle' : 'ios-information-circle-outline';
            } else if (route.name === 'Settings') {
              iconName = focused ? 'ios-list-box' : 'ios-list';
            }

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

5 重新执行react-native run-ios，报错

依照错误提示，安装如下内容

npm i react-native-vector-icons

6 重新执行react-native run-ios，报错

控制台给出的提示如下

依照提示，执行如下代码

cd ios
pod install

7 退出ios文件夹，重新运行项目

cd ..
react-native run-ios

报错

8 利用Xcode打开Init项目中的ios文件夹，找到Info.plist文件并打开

9 在其中插入如下内容

<key>UIAppFonts</key>
<array>
 <string>AntDesign.ttf</string>
 <string>Entypo.ttf</string>
 <string>EvilIcons.ttf</string>
 <string>Feather.ttf</string>
 <string>FontAwesome.ttf</string>
 <string>FontAwesome5_Brands.ttf</string>
 <string>FontAwesome5_Regular.ttf</string>
 <string>FontAwesome5_Solid.ttf</string>
 <string>Foundation.ttf</string>
 <string>Ionicons.ttf</string>
 <string>MaterialIcons.ttf</string>
 <string>MaterialCommunityIcons.ttf</string>
 <string>SimpleLineIcons.ttf</string>
 <string>Octicons.ttf</string>
 <string>Zocial.ttf</string>
</array>

如图所示

10 再次运行react-native run-ios，成功！