问号在反应本机应用程序中显示为图标

Question

我正在尝试在我的 react native 项目中使用 Icon，所以我安装了：

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

2.react-native link react-native-vector-icons

这部分之后的所有图标都添加到android/app/sec/main/assets/fonts:

ls -l /media/groot/Project/React\ Native/Practices/RNheader/android/app/src/main/assets/fonts
total 1976
-rwxrwxrwx 1 groot groot  70344 Jan  9 16:45 AntDesign.ttf
-rwxrwxrwx 1 groot groot  65584 Jan  9 16:45 Entypo.ttf
-rwxrwxrwx 1 groot groot  13456 Jan  9 16:45 EvilIcons.ttf
-rwxrwxrwx 1 groot groot  58272 Jan  9 16:45 Feather.ttf
-rwxrwxrwx 1 groot groot 125016 Jan  9 16:45 FontAwesome5_Brands.ttf
-rwxrwxrwx 1 groot groot  34092 Jan  9 16:45 FontAwesome5_Regular.ttf
-rwxrwxrwx 1 groot groot 186228 Jan  9 16:45 FontAwesome5_Solid.ttf
-rwxrwxrwx 1 groot groot 165548 Jan  9 16:45 FontAwesome.ttf
-rwxrwxrwx 1 groot groot 313528 Jan  9 16:45 Fontisto.ttf
-rwxrwxrwx 1 groot groot  56976 Jan  9 16:45 Foundation.ttf
-rwxrwxrwx 1 groot groot 112472 Jan  9 16:45 Ionicons.ttf
-rwxrwxrwx 1 groot groot 546548 Jan  9 16:45 MaterialCommunityIcons.ttf
-rwxrwxrwx 1 groot groot 128180 Jan  9 16:45 MaterialIcons.ttf
-rwxrwxrwx 1 groot groot  28364 Jan  9 16:45 Octicons.ttf
-rwxrwxrwx 1 groot groot  54056 Jan  9 16:45 SimpleLineIcons.ttf
-rwxrwxrwx 1 groot groot  25552 Jan  9 16:45 Zocial.ttf

1. 我这样添加到我的 js 文件中：

   从“react-native-vector-icons/Ionicons”导入图标；

这是我的文件：

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import Icon from "react-native-vector-icons/Ionicons";


export default HeaderView = () => {
    return (
        <View style={styles.headerStyle} >
            <View style={styles.columnStyle}>
                <Icon name="arrow-back" size={15}/>

            </View>
            <Text>Test</Text>
        </View>)
}

但是当我在 android 模拟器上运行项目时，图标显示为 ?：

我收到了这个警告：

那是我的错？

我想我添加了正确的图标名称：

Answer 1

您需要使用md-arrow-back 而不是arrow-back。

原因如 Iconicons 网站所述，

在没有 Ionic 框架的情况下使用 Ionicons 时，图标将默认 到 Material Design 图标样式。指定非默认图标 样式，为 name 属性添加平台前缀。

这意味着如果您不在 ionic 框架中使用它，则必须在任何图标名称之前添加前缀 md。

您可以在usage page 或Iconicons 中查看更多信息。

Answer 2

这意味着您提供的名称 arrow-back 对该图标无效，请将 name="arrow-back" 更改为 name="md-arrow-back"。如果您真的想使用 arrow-back 从 MaterialIcons 导入而不是 Ionicons