[ 卡卡 DAY 20 ] - React Native icon 用 react-native-vector-icons

react-native-vector-icons 是在看 React Native 所看到的
这个套件自带了十多种图示库，也可以将自定义图示稍微做处理後在 React Native 中使用
原本以为只需要 npm i 就可以完成... 但其实没有那麽简单！！！
还需要做一些原生的配置～～
就跟着卡卡看下去吧！

进行安装

1. 安装

npm install react-native-vector-icons --save

2. link

react-native link react-native-vector-icons

装置配置

ios

1. update lock

cd ios
pod install

2. 执行 react-native link 指令後在 ios/ info.plist 文件中会多一行 Fonts provided by application，也可以动配置把需要的字体加进来！

3. 在 Xcode 专案的 Build Phase 找到 Link Binary With Libraries, 里面会有一个 lib{专案名称}.a，把这个静态库删掉，点击＋再重新加进去，在下指令

npm run ios

android

1. 执行 react-native link 命令後你会发现在 Android 目录下这个库已经自动为我们把字体文件引入到 app/src/main 中并创建了 assets/fonts 的目录

2. 在 android/app/build.gradle 文件中添加

// 自定义的字体文件需要在这里赋值声明，如果有多个都需要添加到数组中
project.ext.vectoricons = [
iconFontNames: [ 'iconfont.ttf' ]
]
// 如果只是使用react-native-vector-icons中的图标，只添加下面这行就行了，上面那段配置可以不写
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

使用方法

1. 在要使用的 component 里引入

import Icon from 'react-native-vector-icons/{字体}';
// 例如 FontAwesome
import Icon from 'react-native-vector-icons/FontAwesome';

2. 使用 Icon 标签

<Icon name={'angle-right'} size={24} color={'#999'} />

name : icon
size : 大小
color: 颜色

name 的部分可以参照这个 doc

补充

• 命名
  因为有很多资源库所以标签命名可以自由修改
  像是
  FontAwesome 叫 FontAwesomeIcon
  Ionicons 叫 Icon

import FontAwesomeIcon from 'react-native-vector-icons/FontAwesome';
import Icon from 'react-native-vector-icons/Ionicons';


<FontAwesomeIcon name={'angle-right'} size={24} color={'pink'}/>
<Icon name={'ios-sad'} size={100} color={'pink'}/>

• 当作 Button 组件

import Icon from 'react-native-vector-icons/FontAwesome';

<Icon.Button name="star" backgroundColor="pink" onPress={function}>
go to find kaka
</Icon.Button>

最後帮 header 换 icon

参考文件:
ReactNative 乾货分享

Day 20 done ~~~ 请多多指教！