React Native Header 右图标

Question

我的 header 右图标有问题。 我希望 header 栏上的右侧图标是搜索图标，而我得到图标的标题名称。 我的应用

任何想法我做错了什么？

我按照教程进行操作： 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

这只是一个愚蠢的错误，尝试在headerRight组件周围添加() 。

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

Answer 2

在此 HeaderButtonCompoenent 拼写错误尝试更改并在您的标题按钮周围添加 ( )。

希望这可以帮助！