Question

如果我在React-Navigation V5中将标头设置为关闭，是否可以有一个自定义标头？

我曾经尝试过，但是headerLeft和headerRight似乎什么都不做，例如，我有以下内容：

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

然后在我的UploadStack中，

<Stack.Navigator initialRouteName="TrackUploadSelectionScreen">
      <Stack.Screen
        name="AddToPlaylistScreen"
        component={AddToPlaylistScreen}
      />
      <Stack.Screen
        name="TrackUploadSelectionScreen"
        component={TrackUploadSelectionScreen}
        options={{
          title: t('general.selectToUpload'),
          headerLeft: () =>
            Platform.select({
              ios: () => (
                <NavigationHeader.TextButton
                  label={t('general.cancel')}
                  onPress={navigation.goBack()}
                />
              ),
              android: () => (
                <NavigationHeader.IconButton
                  iconName="times"
                  label={t('general.cancel')}
                  onPress={navigation.goBack()}
                />
              )
            })
        }}
      />
</Stack.Navigator>

但是它什么也没创建

Answer 1

如果将headerShown设置为false，则将不会显示为headerLeft，headerRight和header属性设置的所有内容。因此，如果要设置任何这些属性，请删除该行。

此外，如果您要有一个自定义标题，而不是默认栏，则可以简单地设置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...
/>
// ...

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

React Navigation v5使用自定义标头

1 个答案: