反应原生图标

Question

有人试图使用react-native-icons？我按照以下步骤操作:

• npm install react-native-icons @ latest --save
• 在XCode中,在项目导航器中右键单击Libraries➜将文件添加到[您的项目名称]
• 转到node_modules➜response-native-icons➜io并添加ReactNativeIcons.xcodeproj
• 将libReactNativeIcons.a(从ReactNativeIcons.xcodeproj下的'Products')添加到项目的构建阶段➜链接二进制与库阶段
• 将要使用的字体文件添加到项目的Copy Bundle Resources构建阶段(单击"+"并单击"Add Other ...",然后从node_modules/react-native-icons/ios/Libraries中选择字体文件/ FontAwesomeKit).运行你的项目(Cmd + R)

我的守则

var React = require('react-native');
var Icon = require('FAKIconImage');
var { AppRegistry, StyleSheet, Text, View} = React;

class BringgersApp extends React.Component {

  constructor(props) {
    super(props);
  }

  render() {
    return(
      <View style={styles.container}>        
        <Text style={styles.welcome}>
          Welcome to Bringgers!          
        </Text>
        <Icon
          name='ion|beer'
          size={150}
          color='#887700'
          style={styles.beer} />       
      </View>
    )
  }
}

var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

React.AppRegistry.registerComponent('BringgersApp', function() { return BringgersApp });

在我构建之后,他说该文件不存在......

Font file doesn't exist

我清理DerivedData并尝试多次构建,但不起作用.

Answer 1

在反应原生中安装和使用Ionicons,FontAwesome和Entypo字体图标的步骤.

首先,您需要使用以下命令进行安装.

react-native install react-native-vector-icons

然后需要链接:

react-native link react-native-vector-icons

将字体包文件导入页面:

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

用法示例:

<View>
    <Text>Ionicons Icons</Text>
    <Icon name='md-bicycle' />

    <Text>FontAwesome Icons</Text>
    <FontAwesome name='trophy' />

    <Text>Entypo Icons</Text>
    <Entypo name='aircraft' />
</View>

如果要查看可用图标列表,可以查看以下目录:

Ionicons:

\node_modules\react-native-vector-icons\glyphmaps\Ionicons.json

FontAwesome:

\node_modules\react-native-vector-icons\glyphmaps\FontAwesome.json

Entypo:

\node_modules\react-native-vector-icons\glyphmaps\Entypo.json 

给你我的应用截图.

Answer 2

首先,

• react-native-icons他自己的维护者指向更新和维护的react-native-vector-icons
• 显然截至目前,rnpm项目已合并为react-native.

换句话说,你的生活就像打字一样简单

react-native install react-native-vector-icons
react-native link react-native-vector-icons

你可能会很高兴*)

*)至少它在我的机器上工作

Answer 3

您是否将文件导入node_modules/react-native-icons/ios/ReactNativeIcons/Libraries/FontAwesomeKit/ionicons.ttf到您的项目中？