如何在 headerLeft 位置包含两个按钮？答案

【问题标题】：How to include two buttons at headerLeft position?如何在 headerLeft 位置包含两个按钮？
【发布时间】：2021-08-02 17:23:21
【问题描述】：

我一直试图在 headerLeft 位置包含两个图标按钮，但该位置只出现一个图标按钮。我在下面提到了我的代码，它没有错误。使用代码，我无法获得所需的输出，即只有两个图标按钮之一出现在 headerLeft 位置。我使用 createStackNavigator() 创建了 AccountStack。在 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}/> , 
                           <Ionicons.Button name= "md-help-circle" color={"#FF0000"} size={32}/> )}}/> 
                <Stack.Screen 
        name="Help" 
        component= {HelpScreen} 
        options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/> )  }}/>
                <Stack.Screen 
        name="Settings" 
        component= {SettingScreen} 
        options={{headerRight: () => (<Ionicons.Button     name="reorder-three" color={"#FF0000"} size={32} onPress={() => navigation.openDrawer()}/> )  }}/>
                </Stack.Navigator>
              );
            }

我是初学者，请帮我解决问题。

【问题讨论】：

标签： react-native react-navigation react-native-navigation react-navigation-v5 react-navigation-stack

【解决方案1】：

您只能在 headerLeft 中渲染单个组件，因此您需要将要设置的两个图标包装在 View 中（只是为了让您知道：您还可以构建一个更复杂的组件以在 headerLeft 中呈现，具有多个按钮/文本等）

<View>
  <Ionicons.Button name= "settings" color={"#FF0000"} size={32}/> , 
  <Ionicons.Button name= "md-help-circle" color={"#FF0000"} size={32}/>  
</View>

【讨论】：