如何使用React Native Part＃4构建WordPress应用：添加字体图标-CSDN博客

本系列旨在展示我如何使用react-native构建一个应用程序以服务WordPress博客中的内容。由于我的博客谈论的是本机反应，因此该系列和文章相互联系。我们将学习如何设置许多使我们的生活舒适的程序包，并学习如何处理WordPress API。在此，本书中讨论的最突出的功能是深色主题，脱机模式，无限滚动等。您可以在本系列中找到更多。本教程系列的灵感来自instamobile的React Native App模板

如果想从头开始学习，可以在下面找到本教程系列的所有先前部分：

接下来，我们需要安装矢量图标包。为了安装此软件包，我们可以运行以下命令：

yarn add react-native-vector-icons

然后，在为Android和iOS平台安装其他软件包时，执行与之前相同的操作。

对于Android，

react-native link react-native-vector-icons

对于iOS，

cd ios ; pod install

对于iOS平台，我们需要手动将图标添加到项目中。

为此，我们需要使用Xcode打开项目的ios，然后将Font文件夹添加到项目中，如下面的屏幕快照所示：

然后，我们需要打开Info.plist并将字体添加到该文件，如下面的代码片段所示：

<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>

结果，Info.plist文件的外观如下图所示：

现在，我们需要将图标添加到我们的底部标签导航器中。为此，我们将使用tabBarIcon方法并返回图标模板。但是首先，我们需要将react-native-vector-icons包导入到我们的App.js文件中，如下面的代码片段所示：

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

然后，我们将图标添加到底部的标签导航器中，如下面的代码片段所示：

const DashboardTabNavigator = createBottomTabNavigator(
  {
    HomePage : {
      screen : Home,
      navigationOptions : {
        tabBarLabel : 'Home' ,
        tabBarIcon : () => <Ionicons name= "md-home" size={ 30 } />,
      },
    },

    Categories : {
      screen : Categories,
      navigationOptions : {
        tabBarLabel : 'Categories' ,
        tabBarIcon : () => <Ionicons name= "md-apps" size={ 30 } />,
      },
    },
    Bookmark : {
      screen : Bookmark,
      navigationOptions : {
        tabBarLabel : 'BookMark' ,
        tabBarIcon : () => <Ionicons name= "ios-bookmark" size={ 30 } />,
      },
    },

    Setting : {
      screen : Setting,
      navigationOptions : {
        tabBarLabel : 'Setting' ,
        tabBarIcon : () => <Ionicons name= "md-settings" size={ 30 } />,
      },
    },
  },
  {
    navigationOptions : ( {navigation} ) => {
      const {routeName} = navigation.state.routes[navigation.state.index];
      return {
        headerTitle : routeName
      }; 
    },
  },
);