Question

我正在尝试在我的 app.js 文件中自定义堆栈导航器的标题。我使用 headerTitle 更改了标题文本，然后为 headerRight 按钮添加了自定义图标。

然而，似乎使用headerTitle时，headerLeft和headerRight根本不可见。如果我删除 headerTitle，它们就会出现在我的标题中。

我尝试更改 left 中的 right 和 headerTitleContainerStyle 属性，并尝试将 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>

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

MyTab 是我的标签导航器。

Answer 1

我使用这种方法在应用程序中自定义标题，如下所示：

users = list(filter(None, [ticket.customer, ticket.support, ticket.preparation, ticket.filing]))
notification.seen_by.set(users)

在这个 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, }, });} 中是我的自定义组件。

React Navigation - 自定义 headerRight 组件被自定义 headerTitle 组件覆盖

1 个答案: