反应原生图标

Question

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

• npm install react-native-icons@latest –save
• 在 XCode 中，在项目导航器中右键单击 Libraries ➜ Add Files to [your project’s name]
• 转到 node_modules ➜ react-native-icons➜ ios 并添加 ReactNativeIcons.xcodeproj
• 将 libReactNativeIcons.a（来自 ReactNativeIcons.xcodeproj 下的“产品”）添加到项目的构建阶段➜ Link Binary With Libraries 阶段
• 将要使用的字体文件添加到项目的 Copy Bundle Resources 构建阶段（单击“+”并单击“添加其他…”，然后从 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 并尝试构建多次，但不起作用。

原文由 parucker 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

第一件事，

• react-native-icons 的维护者自己指向更新和维护 的 react-native-vector-icons
• 显然到目前为止， rnpm 项目已被合并到 react-native。

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

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

你可能会很高兴*）

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

原文由 flq 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

在 react-native 中安装和使用 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>

如果您想查看可用图标列表，可以查看此目录：

离子：

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

字体真棒：

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

拼写：

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

给你我的应用程序截图。

原文由 Dharam Mali 发布，翻译遵循 CC BY-SA 3.0 许可协议