React Native图标

Question

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

• 通过npm安装最新的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下的“Products”中）添加到您的项目的Build Phases ➜ 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并尝试了多次构建，但仍然无法正常工作。

- parucker

---

有人在使用 React Native 图标吗？ - parucker

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 

提供我的应用程序截图。

- Dharam Mali

---

图标未定义。 - AlxVallejo

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

你可能可以直接开始了*)

*) 至少在我的电脑上有效

- flq

---

在我的真实手机和模拟器上，图标显示为一个带有X的方块。 - undefined

Answer 3

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

- Menway

---

选项卡可以使用，只是图标有些问题，但没有显示任何错误，谢谢！ - parucker

Answer 4

要在React Native中使用图标，有许多库可供选择，其中之一是react-native-vector-icons，非常易于使用。

只需要按照两个步骤操作，首先您必须安装库，然后还必须将其链接到项目中才能使用它。

运行以下命令以安装库：

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

运行以下命令以链接库：

• react-native link react-native-vector-icons

如何使用此库：

您可以使用图像中显示的任何目录，每个目录中都有许多图标，现在您必须选择哪个目录对您来说具有最佳图标...

为了找到适合您的最佳目录，我建议您简单地访问此链接： 查找适合您应用程序的最佳图标 在此网站上，只需搜索您要查找的图标名称，您将在所有目录中获得匹配的图标，您只需记住所选图标的名称，并在应用程序中使用它...

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

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

如果您想使用FontAwesome图标库，只需将AntDesign替换为FontAwesome或您想要使用的目录名称。 例如：import Icon from 'react-native-vector-icons/DirectoryName'; 然后像这样使用图标。

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

如需更多详细信息，请访问此链接

参考资料:

• https://openbase.com/js/react-native-vector-icons/documentation
• https://aboutreact.com/react-native-vector-icons/
• https://oblador.github.io/react-native-vector-icons/

- Faizan Muhammad

Answer 5

使用React Native包管理器：https://github.com/rnpm/rnpm $ npm install rnpm -g 正在运行

安装依赖项：

如果您想要在一次运行中安装依赖项并进行链接： $ rnpm install react-native-icons 链接依赖项：

如果您已经安装了一些未链接的模块，请运行： $ rnpm link

- Abiola

Answer 6

在我的项目中，我通过以下代码访问图标：let { Icon, } = require('react-native-icons');。虽然我从未在使用FontAwesome图标时遇到过问题，但在使用Material Icons时遇到了问题。您还可以查看react-native-vector-icons。

- Tom Goldenberg

Answer 7

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

- Jonáš Krutil

Answer 8

你也可以尝试使用native-base库。 它提供了标签 它非常容易和简单，可以与移动设备一起使用任何图标。

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

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

例如。

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

- Pravin Ghorle

Answer 9

尝试

rnpm link // If you installed module

另外

npm install module-name

执行后

rnpm link

重启服务...

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

对我有效。谢谢。

- Danieldms

Answer 10

步骤1：安装react-native-elements

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

第二步：安装 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/>

任何你想要的地方

- s.junaid

---

似乎在2021年，你需要做更多的事情...只需按照此处的文档即可。 - Fotios Tsakiris