1. 程式人生 > >ReactNative 使用向量圖示 react-native-vector-icons

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
> <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)


圖 3.1.2

    元件介紹:

            Icon 元件(FontAwesome相當於Icon)

                    屬性


                    樣式

           

     Icon.Button 元件(FontAwesome.Button)


四、寫在後面的話

    對於學習ReactNative,我想說其功能行還是挺強大的。隨著框架的完善和第三方外掛的完善,我相信會越走越好。歡迎大家進入討論群:597910835。共同學習共同成長。