反应本机图标

Question

有人尝试使用 react-native-icons 吗？我遵循以下步骤：

npm install react-native-icons@latest --save
在 XCode 中，在项目导航器中右键单击库 ➜ 添加文件到 [您的项目名称]
转到 node_modules ➜ react-native-icons➜ ios 并添加 ReactNativeIcons.xcodeproj
将 libReactNativeIcons.a（从 'Products' under ReactNativeIcons.xcodeproj）添加到项目的构建阶段 ➜ Link Binary With Libraries 阶段
将要使用的字体文件添加到项目的 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

你有 "Build settings" -> "Header Search Paths" -> "$(SRCROOT)/node_modules/react-native/React" 递归吗？
您是否在主项目中将图标字体添加到 "Build phases" -> "Copy Bundle Resources"？

Answer 2

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

Answer 3

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

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

Answer 4

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

$ npm 安装 rnpm -g 运行

正在安装依赖项：

如果你想安装一个依赖和link它在一个运行:

$ rnpm 安装 react-native-icons 链接依赖项：

如果您已经安装了一些（但未 linked）模块，运行:

$ rnpm link

Answer 5

要事第一，

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 6

尝试

rnpm link // If you installed module

还有

npm install module-name

执行后

rnpm link

重新启动服务..

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

为我工作。谢谢

Answer 7

安装和使用步骤 Ionicons、FontAwesome 和 Entypo 中的字体图标 本机反应.

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

react-native install react-native-vector-icons

然后需要 Link:

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

输入错误：

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

给你我的应用截图。

Answer 8

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

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

有关更多原生组件，您可以查看 nativebase.io。它是 UI 在 react native 中的一个很棒的库。

Answer 9

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

关注此 link 以获取有关本机基础图标的更多信息。 http://nativebase.io/docs/v2.0.0/components#icon

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

例如

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

Answer 10

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

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

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

运行这个安装库的命令

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

运行此命令用于 linking 库

react-native link react-native-vector-icons

如何使用这个库

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

为了找到最适合你的目录，我会推荐你，只需访问这个 link:

Find best icon for your app

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

假设我在 this link 上搜索箭头，然后从 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

参考：

反应本机图标

React native icons

react-native