Правый значок React Native Header

Question

У меня проблема с моим значком заголовка справа. Мне бы хотелось, чтобы моя правая иконка в строке заголовка была иконкой поиска, и вместо этого я получаю название заголовка иконки. мое приложение

Есть идеи, что я делаю не так?

Я следовал учебному пособию: https://github.com/vonovak/react-navigation-header-buttons и, пожалуйста, найдите часть моего кода, которая должна отображать значок.

ProductsOverviewScreen.navigationOptions={
    headerTitle: 'All products',
    headerRight : <HeaderButtons HeaderButtonCompoenent = {HeaderButton}>
        <Item title='Cart' iconName={'ios-search'} onPress={()=>{}}/>
    </HeaderButtons>
}

Вот полный код страницы, если необходимо:

//LIST OF ALL PRODUCTS WE CAN ORDER
import React from 'react'
import {View, Text, StyleSheet, FlatList} from 'react-native'
//useStore -- helps use to go into the redux store and get our products from there
import {useSelector, useDispatch} from 'react-redux'

import ProductItem from '../../components/shop/ProductItem'

//importing all cart actions
import * as cartActions from '../../store/actions/cart'

import {HeaderButtons, Item} from 'react-navigation-header-buttons'
import HeaderButton from '../../components/UI/HeaderButton'

//This is a component named ProductsOverviewScreen
const ProductsOverviewScreen = props => {
    //products : placed in the combine reducers function in App.js
    //here we get all the available products using useSelector which gets as input the state and we can retrieve the data from there
    // ---- allows you to extract data from the Redux store state
    const products = useSelector(state => state.products.availableProducts)
    //Actions are payloads of information that send data from your application to your store. They are the only source of information for the store. 
    //You send them to the store using store.dispatch()
    const dispatch = useDispatch()
    return(
        <View>
            <FlatList 
                data={products} 
                keyExtractor={item=> item.id} 
                renderItem={
                    itemData => <ProductItem 
                                            image={itemData.item.imageUrl} 
                                            title={itemData.item.title} 
                                            price={itemData.item.price}
                                            //props.navigation.navigate('ProductDetail') will take us to the ProductDetail screen 
                                            //{productId: itemData.item.id} pass productId to the ProductDetail screen
                                            onViewDetail = {() => {props.navigation.navigate('ProductDetail', {
                                                productId: itemData.item.id,
                                            })}}
                                            onAddToCart = {() => {
                                                dispatch(cartActions.addToCart(itemData.item))
                                            }}
                                        />}
            />
        </View>
    )
}

ProductsOverviewScreen.navigationOptions={
    headerTitle: 'All products',
    headerRight : <HeaderButtons HeaderButtonCompoenent = {HeaderButton}>
        <Item title='Cart' iconName={'ios-search'} onPress={()=>{}}/>
    </HeaderButtons>
}

//export so that the component is available elsewhere
export default ProductsOverviewScreen

Answer 1

В этом HeaderButtonCompoenent написана ошибка, попробуйте изменить и добавить () вокруг кнопок заголовка.

Надеюсь, это поможет!

Answer 2

Это просто глупая ошибка, попробуйте добавить () вокруг headerRight компонента.

ProductsOverviewScreen.navigationOptions={
    headerTitle: 'All products',
    headerRight : (
      <HeaderButtons headerButtonCompoenent={HeaderButton}>
        <Item title='Cart' iconName={'ios-search'} onPress={()=>{}}/>
    </HeaderButtons>
    )
}