图标未从标题中的 Ionicon 矢量图标呈现答案

【问题标题】：Icon not rendering from Ionicon vector icons in header图标未从标题中的 Ionicon 矢量图标呈现
【发布时间】：2019-09-05 18:21:13
【问题描述】：

尝试在左上角为嵌套在底部选项卡导航器中的堆栈导航器呈现菜单图标。我正在使用 react-navigation-header-buttons 库来帮助格式化堆栈标题中的图标。基本上，显示的是项目组件“菜单”的标题，而不是我尝试使用的图标。

//HomeScreenNavigator.js
import React from 'react';
import { createStackNavigator } from 'react-navigation-stack';
import { HeaderButtons, Item } from 'react-navigation-header-buttons';

import HomeScreen from '../screens/HomeScreen';
import MediaSelectScreen from '../screens/MediaSelectScreen';
import FinalizePostScreen from '../screens/FinalizePostScreen';
import Colors from '../constants/Colors';
import CustomHeaderButton from '../components/HeaderButton';

const HomeScreenNavigator = createStackNavigator({
    Home: { screen: HomeScreen, navigationOptions: {
        headerTitle: 'Feed',
        headerLeft: (
            <HeaderButtons> HeaderButtonComponent={CustomHeaderButton} 
                <Item title="Menu" iconName="ios-menu" onPress={() => {}} />
            </HeaderButtons>
        )
    }},
    MediaSelect: MediaSelectScreen,
    FinalizePost: FinalizePostScreen
}, {
    defaultNavigationOptions: {
        headerStyle: {
            backgroundColor: Colors.accentColor
        }
    }
});

export default HomeScreenNavigator;

//HeaderButton.js
import React from 'react';
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={Colors.iconSelectedOutline} 
    />
};

export default CustomHeaderButton

不显示错误消息，但也不显示图标。相反，标题栏只有一个 headerLeft 按钮，其中包含文本“MENU”，然后是标题标题“Feed”。 screenshot-simulator

【问题讨论】：

标签： react-native header icons expo

【解决方案1】：

导致问题的代码行：

<HeaderButtons> HeaderButtonComponent={CustomHeaderButton}

需要：

<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>

【讨论】：