左右两个 header 按钮 React Navigation v5

Question

我正在努力实现这个目标

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>

Answer 1

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, width: 10, backgroundColor: 'red'}}>
                  {/* <Icon name="location-on" size={24} /> */} //headerRight doesn't work
                </View>;
              ),

或者

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

左右两个 header 按钮 React Navigation v5

Two header button left and right React Navigation v5

android

react-native

react-native-vector-icons

react-navigation-v5