React native 使用自定义标题

如果我在React Navigation V5中将标题设置为关闭，是否可以拥有自定义标题

我试过了，但是

headerLeft

和

headerlight

似乎什么都没做，例如，我有以下几点：

<Stack.Screen
  component={UploadStack}
  name="UploadStack"
  options={{ headerShown: false }}
/>

---

但是，如果您将

headerShown

设置为

false

为

headerLeft

设置的所有内容，

headerlight

和

header

属性将不显示，那么它不会创建任何内容。因此，如果要设置这些属性中的任何一个，请删除该行

此外，如果您想要自定义标题，可以简单地设置

标题

属性，而不是默认栏。下面是一个自定义标题的示例，其中删除了条，但使用flexbox在左侧和右侧放置了两个非常简单的按钮

// ...
<Stack.Screen
  options={{
    header: () => (
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          height: 50,
        }}>
        <TouchableOpacity
          style={{ padding: 10 }}
          onPress={() => {
            alert('Left');
          }}>
          <Text>Left</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ padding: 10 }}
          onPress={() => {
            alert('Right');
          }}>
          <Text>Right</Text>
        </TouchableOpacity>
      </View>
    ),
  }}
  // Other props...
/>
// ...

/。。。
(
{
警惕（“左”）；
}}>
左边
{
警惕（“右”）；
}}>
赖特
),
}}
//其他道具。。。
/>
// ...

---

您可以根据需要调整样式和内容。

是的，但我想禁用导航附带的标题，因此我必须执行标题显示：false，对吗？不，就像我提到的，如果您将标题显示设置为false，则无法设置自定义标题，因此您只能在根本不想显示任何内容的情况下设置标题。如果您想拥有一个自定义标题，可以使用

标题

属性来覆盖默认标题，如我在示例中所示。

// ...
<Stack.Screen
  options={{
    header: () => (
      <View
        style={{
          display: 'flex',
          flexDirection: 'row',
          justifyContent: 'space-between',
          height: 50,
        }}>
        <TouchableOpacity
          style={{ padding: 10 }}
          onPress={() => {
            alert('Left');
          }}>
          <Text>Left</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={{ padding: 10 }}
          onPress={() => {
            alert('Right');
          }}>
          <Text>Right</Text>
        </TouchableOpacity>
      </View>
    ),
  }}
  // Other props...
/>
// ...