ReactNative 使用向量圖示 react-native-vector-icons
一、概述
向量圖示的好處是:可以自定義圖示大小,顏色,這樣解決了指定死圖示的靈活性。但是跨平臺應用開發中,ReactNative不像Ionic那樣自帶向量圖示,針對這問題,引出RN外掛 react-native-vector-icons。
廢話不多說開始配置。
二、安裝
2.1 外掛安裝
$ yarn add react-native-vector-icons (或者:$ npm install react-native-vector-icons --save)
$react-native link react-native-vector-icons
2.2 IOS 的配置
2.2.1 拖拽路徑 node_modules/react-native-vector-icons/Fonts 資料夾到Xcode專案中(拖拽後的結果如圖:2.2.1)
圖 2.2.1 拖拽文件
2.2.2 檢查Info.plist中是否存在新增的Font列表(圖2.2.2)
圖 2.2.2 確定檔案
至此,IOS的配置完成。
2.3 Android的配置
其實不需要操作太多,當你安裝外掛的時候就已經給你新增進去了。前往圖2.3路徑中確定是否存在font檔案。
圖 2.3
三、使用教程
介紹
圖 3.1.1
然後匯入你需要使用圖示的名字(此處以FontAwesome)為例
import FontAwesome from 'react-native-vector-icons/FontAwesome';
開始使用
<View style={{marginTop:10}}> <FontAwesome.Button name="facebook" backgroundColor="#3b5998"> <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text> </FontAwesome.Button效果展示(圖3.1.2)> <FontAwesome name='user-circle-o' size={20}/> <FontAwesome name='user' size={20} color={'#00ff00'}/> <FontAwesome name="rocket" size={30} color="#900" /> <Text>圖示展示<FontAwesome name={'facebook'} color={'red'} size={20}/></Text> </View>
圖 3.1.2
元件介紹:
Icon 元件(FontAwesome相當於Icon)
屬性
樣式
Icon.Button 元件(FontAwesome.Button)
四、寫在後面的話
對於學習ReactNative,我想說其功能行還是挺強大的。隨著框架的完善和第三方外掛的完善,我相信會越走越好。歡迎大家進入討論群:597910835。共同學習共同成長。