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