我正在尝试使用react-navigation-header-buttons库将图标添加到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 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;
仅标题中的title显示在标题的右侧。
<Item
title="Favourite"
iconName="ios-star"
onPress={() => {
console.log('Mark as favorite!');
}}
/>
React Native版本:5react-navigation-header-buttons版本:3.0.5
问题出在您的组件导入语句中。
代替
import { HeaderButton } from '../components/CustomHeaderButton';
类型
import HeaderButton from '../components/CustomHeaderButton';