如何在 React Native 中同时使用 headerRight 和 headerLeft？答案

【问题标题】：How to use headerRight and headerLeft together in React Native?如何在 React Native 中同时使用 headerRight 和 headerLeft？
【发布时间】：2021-05-09 22:50:17
【问题描述】：

我一直在尝试同时使用 headerLeft 和 HeaderRight，但一直无法这样做。有一次，headerRight 正在工作或 headerLeft 正在工作。有一次，按钮显示在 headerRight 位置或 headerLeft 位置。我希望我的两个图标同时显示在 headerRight 和 headerLeft 位置。

这是我使用 createStackNavigator() 创建堆栈的代码。在帐户屏幕中，我希望将汉堡图标显示在 headerRight 位置以打开抽屉，而我希望将设置图标显示在 headerLeft 位置以访问设置页面。

export default function AccountStack({navigation}) {
  return (
    <Stack.Navigator>
    <Stack.Screen name="Account" component= {AccountScreen} options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/>)},{headerLeft: ()=> (<Ionicons.Button name="settings" color={"#FF0000"} size={32} /> )} }/>
    <Stack.Screen name="Help" component= {HelpScreen} options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32}/> )  }}/>
    <Stack.Screen name="Settings" component= {SettingScreen} options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32}/> )  }}/>
    </Stack.Navigator>
  );
}

请帮助我解决问题。

【问题讨论】：

标签： react-native react-native-android react-navigation react-native-ios react-native-navigation

【解决方案1】：

你的选项写错了

这样写

 options={{
    headerRight: () => (
      <Ionicons.Button
        name="reorder-three"
        color={'#FF0000'}
        size={32}
        onPress={() => navigation.openDrawer()}
      />
    ),
    headerLeft: () => (
      <Ionicons.Button name="settings" color={'#FF0000'} size={32} />
    ),
  }}

您的 return 语句现在应该如下所示

return (
  <Stack.Navigator>
    <Stack.Screen
      name="Account"
      component={AccountScreen}
      options={{
        headerRight: () => (
          <Ionicons.Button
            name="reorder-three"
            color={'#FF0000'}
            size={32}
            onPress={() => navigation.openDrawer()}
          />
        ),
        headerLeft: () => (
          <Ionicons.Button name="settings" color={'#FF0000'} size={32} />
        ),
      }}
    />
    <Stack.Screen
      name="Help"
      component={HelpScreen}
      options={{
        headerRight: () => (
          <Ionicons.Button name="reorder-three" color={'#FF0000'} size={32} />
        ),
      }}
    />
    <Stack.Screen
      name="Settings"
      component={SettingScreen}
      options={{
        headerRight: () => (
          <Ionicons.Button name="reorder-three" color={'#FF0000'} size={32} />
        ),
      }}
    />
  </Stack.Navigator>
);

【讨论】：