1. 程式人生 > >React Native Vector Icons 簡介 « 關於網路那些事...

React Native Vector Icons 簡介 « 關於網路那些事...

通常我們需要使用到 Icons 時,都會前往常用的一些 Icon 網站取得相關工具包檔案

現在,在React Native Vector Icons 就一次幫你整合市面上常用的 Icon 型別,容易使用及修改

可以讓我們更簡單就能使用,真的非常方便

這裡僅節錄在RN使用時的一些筆記,關於網頁用法及其他細節部分請再直接參考官方說明

底下是他所提供的 Icon 類別,多是知名主流Icon:

安裝方式

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

使用方式

這裡舉例FontAwesome

Icon Component

Icon component 一共有三個引數可以使用 - size, name, color

import Icon from
'react-native-vector-icons/dist/FontAwesome'; const myIcon = (<Icon name="rocket" size={30} color="#900" />)

並且可以搭配 style 來調整顯示樣式,例如下方這些 style屬性

backgroundColor
borderWidth
borderColor
borderRadius
padding
margin
color
fontSize

Icon Button

可以使用Icon component 的 Button 方法,來產生按鈕

並且有底下屬性可以使用

color, size, iconStyle, backgroundColor, borderRadius, onPress

import Icon from 'react-native-vector-icons/FontAwesome';
const myButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={this.loginWithFacebook}>
    Login with Facebook
  </Icon.Button>);

const customTextButton = (
  <Icon.Button name="facebook" backgroundColor="#3b5998">
    <Text style={{fontFamily: 'Arial', fontSize: 15}}>Login with Facebook</Text>  </Icon.Button>);

如果你喜歡我們的文章內容,請在這裡按個讚