React-Native 使用自定义IconFont

来源：互联网发布：单片机步进电机控制编辑：程序博客网时间：2024/06/06 05:10

转载自在React Native中优雅的使用iconfont

1.把字符对应表给整出来

var map = {"arrow":"62976","checked":"62977","checked-s":"62978","tag-svip":"62995"};module.exports = (name)=>String.fromCharCode(map[name]);

使用的时候：

import icon from "./fontConf";export default class  IconExample extends Component {    render() {        return (            <View style={styles.container}>                <Text style={{fontFamily: 'FontIconQui',fontSize:30}}>                    arrow-icon:{icon('arrow')}                </Text>                <Text style={{fontFamily: 'FontIconQui',fontSize:30, color:"#ff4444"}}>                    vip-icon:{icon('tag-svip')}                </Text>                <Text style={{fontFamily: 'FontIconQui',fontSize:30, color:"#ff4444"}}>                    tag-svip:{icon('tag-svip')}                </Text>            </View>        )    }}

2.在工程中，需要引入字体文件：
Android：把字体文件拷贝到[project root]/android/app/src/main/assets/fonts/
iOS: 把字体文件拖到对应的Xcode工程里面，勾选Add to targets和Create groups，修改Info.plist文件，添加属性Fonts provided by application，在这个属性下添加相应字体文件名的item，如下图：
这里写图片描述

iOS上添加字体文件具体的流程可以参考https://github.com/oblador/react-native-vector-icons#option-manually。

0 0