左右两个标题按钮 React Navigation v5

问题描述

我正在努力实现这一目标

Header

headerRight 不工作，只有 headerLeft 和 headerTitle 工作

import Icon from 'react-native-vector-icons/MaterialIcons';

    <HomeStack.Navigator
          screenoptions={{headerStyle: {elevation: 0,shadowOpacity: 0}}}>
          <HomeStack.Screen
            name={NAVIGATOR.ProviderTypeTab}
            component={ProviderTypestack}
            options={{
              title: null,headerLeft: () => (
                <View style={{marginTop: 10,marginLeft: 10}}>
                  <ProfilePicComponent onPress={handleDrawer} />
                </View>
              ),headerRight: () => {
                <View style={{height: 10,width: 10,backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              },headerTitle: () => (
                <View style={{width: '85%',marginTop: 10}}>
                  <SearchInputComponent onPress={handleDrawer} />
                </View>
              ),}}
          />
        </HomeStack.Navigator>

解决方法

headerRight 与 headerLeft 相同，但您没有从为 headerRight 提供的函数返回任何内容

改变

headerRight: () => {
                <View style={{height: 10,width: 10,backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              },

到

headerRight: () => (
                <View style={{height: 10,backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              ),

或

headerRight: () => {
               return  (<View style={{height: 10,backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>);
              },