React-Native 使用自定义IconFont

转载自在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。