react-native之TabNavigator引入react-native-vector-icons

一、前言

react-navigation的版本号为6.6.0

二、效果

三、安装

网上很多TabNavigator的例子太老了，先看下方代码

import React from 'react'
import { createAppContainer } from 'react-navigation';
import { createBottomTabNavigator } from 'react-navigation-tabs';
import Icon from 'react-native-vector-icons/Ionicons';
import Mine from './views/mine';
import Discover from './views/discover';
import Account from './views/account';
import Video from './views/video';

const TabNavigator = createBottomTabNavigator({
  Discover: {
    screen: Discover,
    navigationOptions: {
      tabBarLabel: '发现',
      tabBarIcon: ({ tintColor, focused }) => (
        <Icon
          name={'ios-person'}
          size={26}
          style={{ color: tintColor }}
        />
      ),
    }
  },
  Video: {
    screen: Video,
    navigationOptions: {
      tabBarLabel: '视频',
      tabBarIcon: ({ focused, tintColor }) => (
        <Icon name="ios-person" size={30} style={{ color: tintColor }} />
      )
    }
  },
  Mine: {
    screen: Mine,
    navigationOptions: {
      tabBarLabel: '我的',
      tabBarIcon: ({ focused, tintColor }) => (
        <Icon name="ios-person" size={30} style={{ color: tintColor }} />
      )
    }
  },
  Account: {
    screen: Account,
    navigationOptions: {
      tabBarLabel: '账户',
      tabBarIcon: ({ focused, tintColor }) => (
        <Icon name="ios-person" size={30} style={{ color: tintColor }} />
      )
    }
  }
});

export default createAppContainer(TabNavigator);

步骤开始:

yarn add react-navigation react-navigation-tabs react-native-vector-icons // 第一步. 三个一起安装
react-native link  react-native-vector-icons // 第二步 两步都在命令行执行

第二步执行完成会在fonts文件下生成文件，如下（如果不执行第二步的话，icon会显示矩形中一把X，可以试试，要断开连接的话，使用命令react-native unlink react-native-vector-icons）

然后就成功了。

四、遇到的问题

1）ReferenceError:Cant find variable:React
解决：忘记引入 import React from 'react’
2）undefined is not an object (evaluating ‘_react.react.createelement’)
造成的原因：import {React} from ‘react’
解决：import React from ‘react’ 不要花括号！！！（找了很久，一直以为是react-native-vector-icons的错误，哭了）