Ionicons的使用

安裝

參考Ionicons

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

  這時候可能會報錯：npm WARN deprcated lodash@4.2.0:This package is deprecated. Use Object.assign.

  運行命令行
  npm i --save lodash.assign
  In Node.js:

  var assign = require('lodash.assign');   
  

• npm install rnpm -g

• rnpm link

使用

• 引入vector-icons:

  var Icon = require('react-native-vector-icons/Ionicons');
  

• 修改組件值：eg.

  • Button -> Icon.Button
  • TabBarIOS.Item -> Icon.TabBarItem

• 修改屬性值：eg.

  • icon -> iconName
  • selectedIcon -> selectedIconName

坑

• 碰到過Ionians導入不成功，錯誤提示信息為：

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 

於是我將 var Icon = require('react-native-vector-icons/Ionicons');改為
import Icon from 'react-native-vector-icons/Ionicons';導入成功