问号在 React Native 应用程序中显示为图标

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

我这样添加到我的 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

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

Answer 2

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

原因如 Iconicons 网站所述，

When using Ionicons without the Ionic Framework, the icon will default to the Material Design icon style. To specify the non-default icon style, add a platform prefix to the name attribute.

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

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

问号在 React Native 应用程序中显示为图标

Question mark is appeared as icon in react native application

android

react-native

react-native-android