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

Question

我一直试图在headerLeft位置包含两个图标按钮，但该位置只显示一个图标按钮。我在下面提到了我的代码，它没有错误。使用该代码，我无法获得所需的输出，因为只有两个图标按钮中的一个出现在headerLeft位置。我使用createStackNavigator((创建了AccountStack。在头部右侧，汉堡图标出现，可进入抽屉。我希望设置图标按钮和帮助图标按钮一起出现在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>
);
}

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

Answer 1

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

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