Question

尝试在左上角呈现嵌套在底部标签导航器中的堆栈导航器的菜单图标。我正在使用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

Answer 1

引起问题的代码行：

<HeaderButtons> HeaderButtonComponent={CustomHeaderButton}

需要为：

<HeaderButtons HeaderButtonComponent={CustomHeaderButton}>

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

1 个答案: