React-Native設置自定義字體文件

今天主要說說如何通過字體文件加載應用中的一些圖標

首先推薦一個網站iconfont-阿里巴巴矢量圖標庫今瀑，這里有海量的圖標父泳，可以下載你想要的各種矢量圖標屉佳，你也可以在注冊并登陸賬號后宛蚓，把自己想要的圖標打包齿桃、下載為文件

關于<Text>組件

通過fontFamily可以指定<Text>顯示的字體文件惑惶，下文將詳細說明

代碼

  <View style={{backgroundColor:'white',width:width-44,height: 36,marginTop: 2,flexDirection:'row',alignItems: 'center',justifyContent: 'space-around',}} >
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe603;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe602;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe604;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe605;</Text>
      <Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}>&#xe600;</Text>
  </View>

效果圖：
React-Native配置自定義字體文件

下面說重點

從阿里巴巴矢量圖標庫中選擇適合的圖標部翘，并打包下載
React-Native配置自定義字體文件

下載后得到如下文件前翎，iconfont.tff即為所需文件
React-Native配置自定義字體文件

在根工程目錄下創(chuàng)建assets/fonts/文件夾，導入iconfont.ttf文件
React-Native配置自定義字體文件

1. iOS

把fonts文件夾拖到iOS工程目錄下
React-Native配置自定義字體文件
React-Native配置自定義字體文件

另外還需要在info.plist文件key為 Fonts provided by application的Array中添加item fonts/iconfont.ttf痕钢，到此為止香到，已經可以在RN項目中使用對應fontFamily:iconfont中的字體圖標了

2. Android

之所以在工程目錄下創(chuàng)建assets/fonts這樣的路徑鱼冀，就是為了iOS和Android統一，因為Android必須要把字體文件放在[project root]/Android/app/src/main/assets/fonts/文件夾下才能生效悠就，好吧千绪，我們把工程目錄下的assets拷貝一份（可以通過編寫腳本自動執(zhí)行）到Android/app/src/main目錄下
React-Native配置自定義字體文件

3. 使用

<View style={{backgroundColor:'white',width:width-44,height: 36,marginTop: 2,flexDirection:'row',alignItems: 'center',justifyContent: 'space-around',}} >
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
<Text style={{ color: 'red', fontFamily:'iconfont',fontSize: 30 }}></Text>
</View>

效果就是文章開篇的效果圖了

4. 弊端

圖標對應的unicode碼(如：“““)跟顯示的圖標沒有直接的對應關系
http://www.reibang.com/p/96d5c66791c3