Значок не отображается в кнопках реагирования-навигации-заголовка (React Native) - PullRequest
Новая
       91

Значок не отображается в кнопках реагирования-навигации-заголовка (React Native)

0 голосов
/ 12 апреля 2020

Я пытаюсь добавить значок в 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;

Только заголовок в заголовке отображается в заголовке справа. 

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

Реактная собственная версия: 5 версий реагирующих навигационных кнопок заголовка: 3.0.5

1 Ответ

0 голосов
/ 04 мая 2020

Проблема заключается в операторе импорта компонента.

Вместо 

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

Тип 

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