3.3.1 集成 react-native-vector-icons

使用 createBottomTabNavigator 之前首先分别创建 首页，分类，购物车，我的四个页面，代码结构如下：

src/pages
    |-- IndexPage.js
    |-- CategoryPage.js
    |-- CartPage.js
    |-- MyPage.js

每个文件的代码和 IndexPage 类似，就不一一在书中列出来了。

导航条底部的图片可以用 react-native-vector-icons 提供的矢量图。 我们需要引入 react-native-vector-icons 第三方组件，该组件提供了一大堆矢量图，方便程序开发。

Github地址： https://github.com/oblador/react-native-vector-icons 矢量图预览地址：https://oblador.github.io/react-native-vector-icons 安装方式：

npm install react-native-vector-icons --save
或者
yarn add react-native-vector-icons

因为使用该组件需要修改原生代码，需要执行:

react-native link

修改完原生代码需要重新执行 react-native run-ios或 react-native run-android 才能刷新页面。

通过下面代码可以使用该组件。

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

function ExampleView(props) {
  return (<Icon name="ios-person" size={30} color="#4F8EF7" />);
}