反映原生图标

Question

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

• npm install react-native-icons @ latest --save
• 在XCode中，在项目导航器中右键单击Libraries➜将文件添加到[您的项目名称]
• 转到node_modules➜inaction-native-icons➜io并添加ReactNativeIcons.xcodeproj
• 将libReactNativeIcons.a（来自＆＃39;产品＆＃39;在ReactNativeIcons.xcodeproj下）添加到您项目的构建阶段➜链接二进制与库阶段
• 将您要使用的字体文件添加到项目的Copy Bundle Resources构建阶段（单击＆＃39; +＆＃39;然后单击＆＃39; Add Other ...＆＃39;然后选择来自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

在 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>

如果要查看可用图标列表，可以查看以下目录：

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的维护者自己指向更新的＆amp;保持react-native-vector-icons
• 显然截至目前，rnpm项目已合并为react-native。

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

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

你可能会很高兴*）

*）至少它在我的机器上运行

Answer 3

1. 您有“构建设置” - ＆gt; “标头搜索路径” - ＆gt; “$（SRCROOT）/ node_modules / react-native / React”递归？
2. 您是否将图标字体包含在“构建阶段”中 - ＆gt;主项目中的“复制捆绑资源”？

Answer 4

因此，在我的项目中，我通过以下代码访问了图标：let { Icon, } = require('react-native-icons');

虽然我从未遇到使用FontAwesome图标的问题，但我在使用Material Icons时遇到了问题。您还可以查看react-native-vector-icons。

Answer 5

使用React Native Package Manager：https://github.com/rnpm/rnpm

$ npm install rnpm -g 运行

安装依赖项：

如果要安装依赖项并在一次运行中链接它：

$ rnpm install react-native-icons 链接依赖：

如果您已经安装了一些（但未链接）模块，请运行：

$ rnpm link

Answer 6

试

rnpm link // If you installed module

另外

npm install module-name

并执行后

rnpm link

重启服务..

此代码重新链接自动模块。

给我工作。感谢。

Answer 7

您也可以尝试使用本机库。 它提供标签 使用任何可用于移动设备的图标都很简单。

有关本机基本图标的详细信息，请点击此链接。 http://nativebase.io/docs/v2.0.0/components#icon

点击此链接，了解有关图标列表的更多信息。 https://ionicframework.com/docs/v2/ionicons/

离。

<Icon name='ios-list'  style={style.icon} />

Answer 8

第1步：安装react-native-elements

yarn add react-native-elements
# or with npm
npm i react-native-elements --save

第2步：安装react-native-vector-icons

如果您已经安装了react-native-vector-icons作为项目的依赖项，则可以跳过此步骤。否则运行以下命令：

# yarn
yarn add react-native-vector-icons
# or with npm
npm i --save react-native-vector-icons

# link
react-native link react-native-vector-icons

之后只需在您的项目中使用它们，如

import { Icon } from 'react-native-elements';

class IonBeer extends React.Component {
  render() {
    return (
         <Icon
          name='md-beer'
          type='ionicon'
          color='#887700'
          size=150
        />
    );
  }
}

然后简单地使用它。

<IonBeer/>

任何你想要的地方

Answer 9

对于Icon，您可以使用react-native矢量图标。它包含各种图标，我们可以在您的项目中使用它以获得原生外观。

了解更多内容，您可以查看https://github.com/oblador/react-native-vector-icons。

对于更多的本机组件，您可以查看nativebase.io。它是一个非常棒的UI本地反应库。