react-native-vector-icons集成

react-native-vector-icons集成

该方案和官网略有不同，主要是为了解决以下问题

• Xcode 11及以上版本出现的Multiple commands produce …

能够顺利集成的方案

1. 添加react-native-vector-icons

   yarn add react-native-vector-icons
   

   或者使用npm

   npm i react-native-vector-icons --save
   

2. 和项目建立关联

   根目录下执行

   react-native link
   

3. iOS依赖安装

   cd ios // 切换到iOS目录下
   pod install
   

4. 首先查看Xcode的Build System， 具体步骤如下
   
   

如果Build System是New Build System， 执行以下操作,移除所有的.ttf文件

删除后

5. 引用react-native-vector-icons

import {Text, View} from 'react-native';
import React, {Component} from 'react';
import Ionicons from 'react-native-vector-icons/Ionicons';
export default class HomeScreen extends Component<any, any> {
  render() {
    return (
      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
        <Ionicons name="ios-information-circle" size={100} color="blue" />
      </View>
    );
  }
}

6. 重新启动xcode，就可看到运行后的结果图