反应原生图标答案

【问题标题】：React native icons反应原生图标
【发布时间】：2015-04-28 12:59:40
【问题描述】：

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

npm install react-native-icons@latest --save
在 XCode 中，在项目导航器中右键单击库 ➜ 将文件添加到 [您的项目名称]
转到 node_modules ➜ react-native-icons➜ ios 并添加 ReactNativeIcons.xcodeproj
将 libReactNativeIcons.a（来自 ReactNativeIcons.xcodeproj 下的“产品”）添加到项目的构建阶段 ➜ 将二进制文件与库链接阶段
将要使用的字体文件添加到项目的 Copy Bundle Resources 构建阶段（单击“+”并单击“添加其他...”，然后从 node_modules/react-native-icons/ 中选择字体文件ios/库/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 并尝试构建很多次，但都不起作用。

【问题讨论】：

任何人使用反应原生图标？？

标签： react-native

【解决方案1】：

安装和使用Ionicons、FontAwesome和Entypo字体图标的步骤react-native 。

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

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

FontAwesome：

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

输入错误：

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

给你我的应用截图。

【讨论】：

图标未定义。

【解决方案2】：

第一件事，

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

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

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

你可能会很高兴*）

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

【讨论】：

【解决方案3】：

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

【讨论】：

标签工作正常，只是图标有问题，但不要显示任何错误，谢谢！

【解决方案4】：

使用 React Native 包管理器：https://github.com/rnpm/rnpm

$ npm install rnpm -g 跑步

安装依赖：

如果你想安装一个依赖并在一次运行中链接它：

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

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

$ rnpm 链接

【讨论】：

【解决方案5】：

你有“构建设置”->“标头搜索路径”->“$(SRCROOT)/node_modules/react-native/React”递归吗？
您是否在主项目中的“构建阶段”->“复制捆绑资源”中包含图标字体？

【讨论】：

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

试试

rnpm link // If you installed module

还有

npm install module-name

执行后

rnpm link

重启服务..

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

为我工作。谢谢。

【讨论】：

【解决方案8】：

您也可以尝试使用原生库。它提供标签使用任何可以在移动设备上使用的图标都很容易和简单。

点击此链接了解更多关于原生基础图标的信息。 http://nativebase.io/docs/v2.0.0/components#icon

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

例如

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

【讨论】：

【解决方案9】：

第 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/>

任何你想要的地方

【讨论】：

看来在 2021 年你需要做更多的事情......只需关注文档here

【解决方案10】：

对于在 react native 中使用图标，有很多可用的库，react-native-vector-icons 就是其中之一，非常好用。

只需执行 2 个步骤，首先您必须安装库，那么你也必须链接它，才能在你的项目中使用它。

运行此命令安装库

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

运行此命令以链接库

react-native link react-native-vector-icons

如何使用这个库

您可以使用图像中显示的任何目录，每个目录中都有很多图标，现在您必须选择哪个目录有最适合您的图标...

为了找到最适合您的目录，我会向您推荐，只需访问此链接：

Find best icon for your app

在此网站上只需搜索您要查找的图标名称，您将在所有目录中获得匹配的图标，您只需记住所选图标的名称，并在您的应用中使用它...

假设我在 this 链接上搜索箭头，并从 AntDesign 目录中选择了arrowsalt，并希望在我的应用程序中使用它。

import Icon from 'react-native-vector-icons/AntDesign';

如果您想使用 FontAwesome，只需将 AntDesign 替换为 FontAwesome 或您要使用的目录名称即可。例如 从 'react-native-vector-icons/DirectoryName' 导入图标；

并使用这样的图标。

<Icon name="arrowsalt" size={30} color="blue" />

更多详情Visit this link

参考：

【讨论】：

【解决方案11】：

对于 Icon 你可以使用 react-native vector icon 。它由各种图标组成，我们可以在您的项目中使用这些图标以获得原生外观。

更多你可以看看https://github.com/oblador/react-native-vector-icons。

有关更多原生组件，您可以查看 nativebase.io。这是一个很棒的反应原生 UI 库。

【讨论】：