查閱各方大神的文檔之后,總結(jié)一下自己添加的過程
ios配置
請(qǐng)查看[React Native如何添加自定義圖標(biāo)]
(https://www.cnblogs.com/xiaojun-zxj/p/6293450.html)
以下部分:
Android配置
請(qǐng)查看 在react-native項(xiàng)目中使用iconfont自定義圖標(biāo)庫(kù)(android)
以下部分:
說明:引入的ttf文件為你自定義icon的文件,可以從阿里下載削咆,或者到這里icomoon制作自己的icon.ttf文件
ReactNative項(xiàng)目配置
1.安裝react-native-vector-icons
npm install react-native-vector-icons --save
react-native link
2.js文件
inspire.js
import createIconSet from 'react-native-vector-icons/lib/create-icon-set';
import glyphMap from '../fonts/inspire.json';
const iconSet = createIconSet(glyphMap, 'inspire', '../fonts/inspire.ttf');
export default iconSet;
export const Button = iconSet.Button;
export const TabBarItem = iconSet.TabBarItem;
export const TabBarItemIOS = iconSet.TabBarItemIOS;
export const ToolbarAndroid = iconSet.ToolbarAndroid;
export const getImageSource = iconSet.getImageSource;
代碼中有兩個(gè)文件,inspire.json和inspire.ttf(就是你自定義的icon文件)箍铲,這里我把它們放到項(xiàng)目里的fonts文件夾下了。
這個(gè)js文件我是放到component中鬓椭,作為組件引入颠猴。只要放到某個(gè)位置正確引入就行。
3.json文件
在你下載的圖標(biāo)文件夾中有一個(gè)svg文件
編寫腳本來生成我們需要的json文件小染,查看ReactNative中如何使用自定義的iconfont
如果運(yùn)行腳本出現(xiàn)-bash: ./json.sh: Permission denied 這個(gè)錯(cuò)誤芙粱,是因?yàn)闆]有執(zhí)行sh文件的權(quán)限,賦權(quán)限:chmod u+x *.sh就可以運(yùn)行了
我在用上面的腳本執(zhí)行完之后生成的內(nèi)容是這樣的:
實(shí)際我們需要的是這種:
不知道是腳本問題還是我們修改的有問題氧映,好在我的圖標(biāo)個(gè)數(shù)不是很多春畔,我手動(dòng)修改為正確的值了。
在圖標(biāo)文件夾下有一個(gè)selection.json文件
打開這個(gè)文件岛都,格式化下律姨,會(huì)看到這樣的數(shù)據(jù):
name對(duì)應(yīng)的就是圖標(biāo)的名字,code對(duì)應(yīng)的上面不正確json里xe那部分值臼疫。
這樣一切就緒后择份,在我們的代碼中就可以使用自己的icon了。
4.js代碼使用
import Icon from './inspire';
/*your code*/
render(){
return(
<Icon name="time" size={24} color='#b4b4b4'></Icon>
)
}
注意:json中name的值加引號(hào)烫堤,code值不加引號(hào)荣赶。js凤价、json、ttf文件命名最好一致(之前試過不一致好像會(huì)報(bào)錯(cuò)拔创,沒有查明原因)利诺。
10
這個(gè)值最好也保持命名一致。[手動(dòng)捂臉]
補(bǔ)充:Android通過上述方法圖標(biāo)顯示的是亂碼剩燥,只要將js慢逾、json、ttf文件放到react-native-vector-icons相應(yīng)文件夾中灭红,圖標(biāo)才能正常顯示侣滩。js文件放到根目錄,json文件放到glyphMap文件夾变擒,ttf放到Fonts文件夾中君珠。引入時(shí)為import Icon from 'react-native-vector-icons/inspire'