react native text换行_React-Native之图标使用(react-native-vector-icons)

ea919b5eccdc169047850e4e0e9e700a.png

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

项目图标地址:

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

你可以看文档,也可以看这篇文章都可以完成使用设置(仅供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  就是下面的黑色框标注的名字,你需要那个模块的就引入那个模块

6c7061ad68f196e26b30a880e3a150dc.png

在手机上的效果:

bf6da371c14edb7b737ef39215a605ba.png

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

focusdroid/ReactNative_testProject​github.com
3f5232cc0ded53a4aa3062de07f4459b.png
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值