Reactjs 反应导航-自定义headerRight组件包含在自定义headerRight组件中

我正在尝试自定义app.js文件中堆栈导航器的标题。我使用

headerTitle

更改了标题文本，然后为

headerRight

按钮添加了自定义图标

但是，当使用

headerTitle

时，

headerLeft

和

headerlight

似乎根本不可见。如果我删除

标题

，则它们将在标题中可见

我尝试更改

headerTitleContainerStyle

中的

left

和

right

属性，并尝试将

padding

和

margin

添加到

headerTitleStyle

，但这些都不起作用。这是React Navigator的文档建议的

下面是我的相关堆栈页面代码

<Stack.Navigator
  initialRouteName="Dashboard"
  screenOptions={{
    headerTitleAlign: "center",
    headerStyle: {
      backgroundColor: Colors.secondary,
    },
    headerTintColor: Colors.secondary,
  }}
>
  <Stack.Screen
    name="Dashboard"
    component={MyTab}
    options={
      ({ title: "Dashboard" },
      { headerTitleStyle: { marginHorizontal: 150 } },
      { headerTitleContainerStyle: { right: 200, paddingRight: 150 } },
      {
        headerRight: () => (
          <Button
            onPress={() => alert("This is a button!")}
            title="Info"
            color="#00cc00"
          >
            <Text>Teext</Text>
          </Button>
        ),
      },
      { headerTitle: () => <Text>yeeete</Text> })
    }
  />
  
</Stack.Navigator>

(
警报（“这是一个按钮！”）}
title=“Info”
color=“#00cc00”
>
齿
),
},
{标题：（）=>yeeete}）
}
/>

上面看到的

按钮

是直接从文档中关于如何添加右标题按钮的示例复制而来的。我的代码与他们的示例几乎相同（好吧，我想显然不是，因为它不工作？！），所以我不知道问题可能是什么

---

MyTab

是我的选项卡导航器。

我使用这种方法来定制应用程序中的标题，如下所示：

const createAppHeader = (props, callback, data) => {

props.navigation.setOptions({
    headerRight: () => (
        <AppHeader
            onClick={callback}
            pageData={data}
        />
    ),
    headerLeft: null,
    headerStyle: {
        shadowOpacity: 0,
        shadowOffset: {
            height: 0,
        },
        elevation: 0,
        shadowRadius: 0,
    },
});}

const createAppHeader=（道具、回调、数据）=>{
props.navigation.setOptions({
头灯：（）=>(
),
headerLeft:null，
头型：{
阴影不透明度：0，
阴影偏移：{
高度:0,，
},
海拔：0，
阴影半径：0，
},
});}

---

在这个

AppHeader中

是我的自定义组件。

查看这个，谢谢。我在各地的

导航选项中都见过这种方法，但似乎找不到关于它如何工作的文档。为什么我不能这样做，从[link]（）反应导航文档网站谢谢。我在各地的
导航选项中都见过这种方法，但似乎找不到关于它如何工作的文档。为什么我不能这样做，从[link]（）react Navigation docs网站这是react Navigation 2.0，最近react建议使用react Navigation 5.0，所以使用这样的导航选项已经过时了？如果是这样，我该怎么做呢？耶，我建议你切换到5.0。您可以按照react文档进行操作，从5.0文档中很容易掌握基础知识。