图标未显示在 React-native 的 HeaderButtons 中答案

【问题标题】：Icons are not displaying in HeaderButtons in React-native图标未显示在 React-native 的 HeaderButtons 中
【发布时间】：2021-09-06 07:33:01
【问题描述】：

图标未显示在 HeaderButtons 中。相反，为后备提供的文本仅显示。这是我的组件代码：

import React from "react";

import { Platform } from "react-native";
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from 'react-native-vector-icons';

import Colors from '../constants/Colors';

const CustomHeaderButton = props => {
    return (
        <HeaderButton
            {...props}
            IconComponent={Ionicons}
            iconSize={23}
            color={Platform.OS === "android" ? "white" : Colors.primaryColor}
        />
    );
};

export default CustomHeaderButton;

这是我导入的文件：

import React from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

import { MEALS } from '../data/dummy-data';
import HeaderButton from '../components/HeaderButton';

const MealDetailScreen = props => {

    const mealId = props.navigation.getParam("mealId");

    const selectedMeal = MEALS.find(meal => meal.id === mealId);

    return (
        <View style={styles.screen}>
            <Text>{selectedMeal.title}</Text>
            <Button title="Go back to Categories!" onPress={() => {
                props.navigation.popToTop();
            }} />
        </View>
    );
}

MealDetailScreen.navigationOptions = (navigationData) => {
    const mealId = navigationData.navigation.getParam("mealId");
    const selectedMeal = MEALS.find(meal => meal.id === mealId);
    return {
        headerTitle: selectedMeal.title,
        headerRight: () => (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                <Item
                    title="Favorite"
                    iconName="star"
                    onPress={() => {
                        console.log("Mark as favorite.");
                    }}
                />
            </HeaderButtons>
        )
    };

};

const styles = StyleSheet.create({
    screen: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        // backgroundColor: "white"
    }
});

export default MealDetailScreen;

它没有给出任何错误并在控制台中给出输出。但是没有显示星星图标。

【问题讨论】：

标签： react-native react-native-vector-icons

【解决方案1】：

您好，您可以通过导航到 android/app/build.gradle 来解决此问题并将这一行粘贴到顶部并通过react-native run-android重新运行应用程序

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

【讨论】：

感谢您的解决方案，但仍未提供所需的输出

【解决方案2】：

在 android/app/build.gradle 中添加以下代码并重新运行应用程序。

project.ext.vectoricons = [
iconFontNames: [ 'Ionicons.ttf' ] // Name of the font files you want to 
copy
]
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

【讨论】：

【解决方案3】：

我得到了错误。而不是这个：

import { Ionicons } from 'react-native-vector-icons';

我添加了这个：

import Ionicons from 'react-native-vector-icons/Ionicons';

图标出现了。

【讨论】：