React native 渲染顶部导航栏上的两个标题按钮

我需要在顶部导航栏的标题上显示两个按钮

渲染工作正常，如果我这样做：

static navigationOptions = {
   title: "Categories",        
   headerRight: [<HeaderBarButton image={<HeaderBarButtonSearchImage/>} />, <HeaderBarButton image={<HeaderBarButtonInfoImage/>} />],        
};

静态导航选项={
标题：“类别”，
头灯：[，]，
};

但是，react向我显示了这个警告，因为我正在传递一个没有键的数组

然后，我试着这样做，但我犯了一个错误

headerRight: [ 
  {key: '1', item: <HeaderBarButton image={<HeaderBarButtonSearchImage></HeaderBarButtonSearchImage>}></HeaderBarButton>}, 
  {key: '2', item: <HeaderBarButton image={<HeaderBarButtonInfoImage></HeaderBarButtonInfoImage>}></HeaderBarButton>} 
]

headerRight:[
{键：'1'，项：}，
{键：'2'，项：}
]

---

在导航栏上显示组件数组的正确方法是什么？

创建所需数据，并使用

映射功能将数据注入组件。

示例

const按钮=[
{
id:0，
标题：“一”
},
{
id:1，
标题：“两个”
}
]
...
静态导航选项=（{navigation}）=>{
返回{
...
headerRight:button.map(
（信息，i）=>{return（）
}),
};
};

静态导航选项={
标题：“类别”，
headerRight:
选项={{
标题：“标题”，
标题颜色：“金色”，
头饰样式：{
textAlign：“居中”，
弹性：1
}
标题左侧：（）=>(
log（'这是一个左按钮！'）}
title=“菜单”
/>
),
头灯：（）=>(
log（'这是一个右键！'）}
title=“Info”
/>
log（'这是最右边的按钮！'）}
title=“删除”
/>
)  
}} 
您需要“钥匙”吗。
试试这个

静态导航选项={
标题：“类别”，
头灯：[，]，
};
@user1539434如果错误已更正，请选择答案好吗？您好！虽然这段代码可以解决这个问题，但如何以及为什么解决这个问题将真正有助于提高您的帖子质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请在回答中添加解释，并说明适用的限制和假设
static navigationOptions = {
   title: "Categories",        
   headerRight: <View style={{flexDirection: 'row}}>
                   <HeaderBarButton image={<HeaderBarButtonSearchImage/>} />
                   <HeaderBarButton image={<HeaderBarButtonInfoImage/>} />
                <View/>,        
};

 options={{
            title:"Title",
            headerTintColor: 'gold',
            headerTitleStyle: {
             textAlign:"center",
             flex:1 
            }
            headerLeft: () => (
             <View style={{marginHorizontal: 50, flexDirection: "row"}}>
              <Button
                onPress={() => console.log('This is a Left button!')}
                title="Menu"
              />
             </View>
            ),
            headerRight: () => (
             <View style={{marginHorizontal: 50, flexDirection: "row"}}>
              <Button
                onPress={() => console.log('This is a Right button!')}
                title="Info"
              />
              <Button
                onPress={() => console.log('This is a Right most button!')}
                title="Delete"
              />
             </View>
           )  
          }} 

static navigationOptions = {
   title: "Categories",        
   headerRight: [<HeaderBarButton key='btn01' image={<HeaderBarButtonSearchImage/>} />, <HeaderBarButton key='btn02' image={<HeaderBarButtonInfoImage/>} />],        
};