React native 图标未显示在react导航标题按钮中（react Native）

我正在尝试使用react navigation header buttons library向headerRight添加图标。但显示的是图标的标题，而不是图标

这是图标应该显示的代码

import React, { useState, useLayoutEffect } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native'

import { MEALS } from '../data/DummyData';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';
import { HeaderButton } from '../components/CustomHeaderButton';

const MealDetailScreen = props => {
    const mealId = props.route.params.mealId;
    const selectedMeal = MEALS.find(meal => meal.id == mealId);
    const [headerTitle, setHeaderTitle] = useState();

    useLayoutEffect(() => {
        setHeaderTitle(() => selectedMeal === undefined ? props.route.params.title : selectedMeal.title)
        props.navigation.setOptions({
            headerTitle: headerTitle,
            headerRight: () => (
                <HeaderButtons HeaderButtonComponent={HeaderButton}>
                    <Item
                        title="Favourite"
                        iconName="ios-star"
                        onPress={() => {
                            console.log('Mark as favorite!');
                        }}
                    />
                </HeaderButtons>
            )
        });
    }, [props.navigation, headerTitle]);


    return (
        <View>
            <Text>The Meal Detail Screen!</Text>
            <Text>{selectedMeal.title}</Text>
            <Button title="Go Back to Categories!" onPress={() => {
                props.navigation.popToTop();
            }} />
        </View>
    )
}

const styles = StyleSheet.create({
});

export default MealDetailScreen;

import React，{useState，useLayoutEffect}来自'React'；
从“react native”导入{视图、文本、按钮、样式表}
从“../data/DummyData”导入{founds}；
从“反应导航标题按钮”导入{HeaderButtons，Item}；
从“../components/CustomHeaderButton”导入{HeaderButton}；
const MealDetailScreen=道具=>{
const mealId=props.route.params.mealId；
const selectedMeal=finds.find（fine=>fine.id==mealId）；
const[headerTitle，setHeaderTitle]=useState（）；
useLayoutEffect（（）=>{
setHeaderTitle（（）=>selectedMeal===未定义？props.route.params.title:selectedMeal.title）
props.navigation.setOptions({
海德特尔：海德特尔，
头灯：（）=>(
{
log（'markasfavorite！'）；
}}
/>
)
});
}，[props.navigation，headertle]）；
返回(
用餐详细信息屏幕！
{selectedMeal.title}
{
props.navigation.poptoop（）；
}} />
)
}
const styles=StyleSheet.create({
});
导出默认MealDetailScreen；

这是标题按钮的自定义组件

import React from 'react';
import { Platform } from 'react-native';
import { HeaderButton } from 'react-navigation-header-buttons';
import { Ionicons } from '@expo/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;

从“React”导入React；
从“react native”导入{Platform}；
从“react navigation header buttons”导入{HeaderButton}；
从“@expo/vector icons”导入{Ionicons}；
从“../constants/Colors”导入颜色；
const CustomHeaderButton=props=>{
返回(
);
}
导出默认的CustomHeaderButton；

只有中的标题显示在前照灯处

<Item
  title="Favourite"
  iconName="ios-star"
  onPress={() => {
  console.log('Mark as favorite!');
  }}
/>

{
log（'markasfavorite！'）；
}}
/>

反应本机版本：5

---

react导航标题按钮版本：3.0.5

问题在于组件导入语句

而不是

import { HeaderButton } from '../components/CustomHeaderButton';

类型

---

我发现在给出的示例中，

IconComponent

没有（出于任何原因）被传递到

项中。由于IconComponent未定义，因此将使用文本组件。这一逻辑显而易见

我实现这一点的方法是创建一个自定义组件，该组件将返回
HeaderButton
，而不是
HeaderButton
：

从“React”导入React；
从“@expo/vector icons”导入{Ionicons}；
从“../constants/Colors”导入颜色；
从“react native”导入{Platform}；
从“react navigation header buttons”导入{HeaderButtons，HeaderButton}；
const CustomHeaderButton=（道具）=>(
);
导出常量CustomHeaderButtons=（道具）=>{
返回；
};
从“反应导航标题按钮”导出{Item}；

现在您可以这样使用它：

从“../components/HeaderButton”导入{CustomHeaderButtons，Item}”；
...
MealDetailScreen.navigationOptions=navigationData=>{
const mealId=navigationData.navigation.getParam（'mealId'）；
const selectedMeal=finds.find（fine=>fine.id==mealId）；
返回{
标题：selectedMeal.title，
头灯：（）=>(
{console.log（'标记为收藏夹！'）}
/>
)
};
};
我通过两项更改解决了相同的问题：

而不是：
键入：

import HeaderButton from '../components/HeaderButton';

我使用箭头函数返回了，并将其设置为headerRight中的可变headerRightButton：
mealdeailscreen.navigationOptions=（navigationData）=>{
const mealId=navigationData.navigation.getParam（'mealId'）；
const selectedMeal=finds.find（fine=>fine.id==mealId）；
const headerRightButton=（）=>{
返回(
{
console.log（“添加到收藏夹”）；
}}
/>
{
console.log（'Added to favorites2'）；
}}
/> 
);
};
返回{
标题：selectedMeal.title，
前照灯：（前照灯按钮）
};
};

import { HeaderButton } from '../components/CustomHeaderButton'; 

import HeaderButton from '../components/HeaderButton';

MealDetailScreen.navigationOptions = (navigationData) => {
    const mealId = navigationData.navigation.getParam('mealId');
    const selectedMeal = MEALS.find(meal => meal.id === mealId);
    const headerRightButton = () => {
        return (
            <HeaderButtons HeaderButtonComponent={HeaderButton}>
                            <Item 
                                title= 'Favorite'
                                iconName="ios-star"
                                onPress= {() => {
                                    console.log('Added to favorites');
                                }}
                            />
                            <Item 
                                title= 'Favorite'
                                iconName= "ios-star-outline"
                                onPress= {() => {
                                    console.log('Added to favorites2');
                                }}
                            /> 
                      </HeaderButtons>
        );
    };
    return {
            headerTitle: selectedMeal.title,
            headerRight: (headerRightButton)
        };
};