react native text换行_React-Native之图标使用（react-native-vector-icons）

在React-Native开发中少不了使用图标，接下来看看怎样在项目中使用图标

项目图标地址：

React-native-vector-icons图标github地址​github.com

你可以看文档，也可以看这篇文章都可以完成使用设置(仅供android参考，ios请移步上面文档)

> 1. 安装react-native-vector-icons图标库
yarn add react-native-vector-icons
> 2. 使用命令使其与之关联
react-native link

***以上步骤完成之后一定要 react-native run-android 重新安装，不然不生效或者显示 xx之类的  ***

> 3. 使用图标
import React, { Component, Fragment } from 'react';
import {
  View,
  Text
} from 'react-native';
import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
import AntDesign from 'react-native-vector-icons/AntDesign';

export default class Popular extends Component{
  render(){
    return (<Fragment>
      <View>
        <Text>Popular</Text>
        <MaterialIcons
          name={'whatshot'}
          size={26}
        />
        <View><Text>-----------------------------------</Text></View>
        <AntDesign
          name={'clockcircle'}
          size={26}
        />
      </View>
    </Fragment>);
  }
}

上面的MaterialIcons  就是下面的黑色框标注的名字，你需要那个模块的就引入那个模块

在手机上的效果：

以上就是使用react-native-vector-icons的android使用效果

focusdroid/ReactNative_testProject​github.com