React-Native設置自定義字體文件
2020/05/14更新
接入第三方字體ttf
AirbnbCereal-Bold.ttf
AirbnbCereal-Light.ttf
Android
字體文件放在android/app/src/main/assets/fonts/文件目錄下就行了
使用的時候在style中指定fontFamily即可
fontFamily: 'AirbnbCerealApp-Bold',
iOS
1、把字體文件拖到iOS工程目錄下
- Copy items if needed
- Create groups
確保在xcode中的TARGETS->PROJECT->Build Phases->Copy Bundle Resources中包含這些字體文件
2竭业、修改Info.plist:
加入以下代碼（本質(zhì)上是添加 Fonts provided by application項）
<key>UIAppFonts</key>
<array>
<string>AirbnbCereal-Bold.ttf</string>
<string>AirbnbCereal-Light.ttf</string>
</array>
3塑崖、輸出iOS系統(tǒng)支持的所有字體
-(void)logFont {
// 輸出所有的字體名稱忠聚，搜索是否有剛加入的字體文件名
for (NSString *familyName in [UIFont familyNames]) {
NSArray *familyNameArr = [UIFont fontNamesForFamilyName:familyName];
NSLog(@"----------------");
NSLog(@"familyName: %@", familyName);
NSInteger tempCount = [familyNameArr count];
for (NSString *fontName in familyNameArr) {
NSLog(@"fontName: %@", fontName);
}
}
}
在輸出的結果中搜索包含
Airbnb的項
familyName: Airbnb Cereal App
fontName: AirbnbCerealApp-Bold
fontName: AirbnbCerealApp-Light
因此iOS端不能在代碼中直接使用AirbnbCereal-*帜篇，而應該使用AirbnbCerealApp-*
//以使用 AirbnbCereal-Bold.ttf 為例
?
fontFamily: 'AirbnbCereal-Bold',
?
fontFamily: 'AirbnbCerealApp-Bold',
接下來說的是使用iconfont队橙，字體文件 —> 圖標
今天主要說說如何通過字體文件加載應用中的一些圖標
首先推薦一個網(wǎng)站iconfont-阿里巴巴矢量圖標庫贞滨，這里有海量的圖標勺良，可以下載你想要的各種矢量圖標，你也可以在注冊并登陸賬號后，把自己想要的圖標打包讳侨、下載為文件
效果
關于
<Text>組件
通過fontFamily可以指定<Text>顯示的字體文件，下文將詳細說明-
代碼
<View style={styles.container} > <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> <Text style={styles.iconStyle}></Text> </View> //樣式 const styles = StyleSheet.create({ container:{ backgroundColor:'white', width:width-44, height: 36, marginTop: 2, flexDirection:'row', alignItems: 'center', justifyContent: 'space-around' }, iconStyle: { color: 'red', fontFamily:'iconfont', fontSize: 30 } }) -
效果圖：
用字體文件加載圖標
解釋
-
從阿里巴巴矢量圖標庫中選擇適合的圖標耕渴，并打包下載
-
下載后得到如下文件，
iconfont.tff即為所需文件
-
在根工程目錄下創(chuàng)建
assets/fonts/文件夾栏赴，導入iconfont.ttf文件
1. iOS
- 把
iconfont.ttf文件拖到iOS工程目錄下
-
修改Info.plist
在info.plist文件中添加key為
Fonts provided by application的Array中添加itemiconfont.ttf准浴，到此為止，已經(jīng)可以在RN項目（iOS端）中使用對應fontFamily:iconfont中的字體圖標了
如下圖所示：
2. Android
之所以在工程目錄下創(chuàng)建assets/fonts這樣的路徑，就是為了iOS和Android統(tǒng)一，因為Android必須要把字體文件放在[project root]/android/app/src/main/assets/fonts/文件夾下才能生效，好吧气筋，我們把工程目錄下的assets拷貝一份（可以通過編寫腳本自動執(zhí)行）到Android/app/src/main目錄下
3. 使用
<View style={styles.container} >
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
<Text style={{fontFamily:'iconfont'}}></Text>
</View>
效果就是文章開篇的效果圖了
4. 弊端
圖標對應的是unicode碼，不夠直觀抹沪， (如："", "")跟顯示的圖標沒有直接的對應關系
更新
最近注意到有評論反映在iOS端運行報錯
Unrecognized font family 'iconfont'
通過跟@_MinYa_的溝通噪馏，發(fā)現(xiàn)了一種導致上述問題的可能性
在阿里巴巴矢量圖標庫中新建項目的時候注意FontClass/Symbol前綴和Font Family
默認值是icon和iconfont
如果這里有自定義的情況的話隅要，在代碼中引用的時候fontFamily:'自定義FontFamily'
鑒于上述問題，強烈建議創(chuàng)建字體文件項目的時候使用默認名稱
