React Native Navigation - 标题推出 headerRight 和 headerLeft

Question

问题

如果标题太长，它会在应用省略号之前推出 headerRight 和 headerLeft。

注意

我在这里发现了一个类似的问题，但没有解决此问题：React Native Navigation - 添加 headerRight 导致标题从左侧推开

代码

{
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: colors.blueOne },
    headerRightContainerStyle: { paddingRight: 20 },
    headerLeftContainerStyle: { paddingLeft: 20 },
    headerTitleStyle: {
      fontSize: 24,
      color: colors.whiteTwo,
      maxWidth: '90%'
    },
    headerTintColor: colors.whiteTwo,
    title: routeTitle,
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: () => <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />,
    headerRight: () => <HeaderRight routeName={route.name} />
}

半固定

只有在添加了

maxWidth: '90%'

之后，才解决了这个问题，但是现在其他标题在不应该被切断的时候被切断了。查看下面的结果...

Answer 1

通过将

title

/

headerRight

/

headerLeft

替换为...

headerTitle

来修复此问题，同时将左/右包含在

headerTitle

内。

{
    headerTitleAlign: 'center',
    headerStyle: { backgroundColor: colors.blueOne },
    headerTitle: () => (
      <View
        style={{
          width: '100%',
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center'
        }}
      >
        <Hamburger navigation={navigation} isOpen={isHamburgerOpen} />
        <View style={{ flex: 1, paddingLeft: 20 }}>
          <Text
            ellipsizeMode="tail"
            numberOfLines={1}
            style={{
              ...globalStyles.pageHeading,
              color: colors.whiteTwo,
              textAlignVertical: 'center',
              textAlign: 'center',
              flex: 1
            }}
          >
            {routeTitle}
          </Text>
        </View>
        <HeaderRight routeName={route.name} />
      </View>
    ),
    ...TransitionPresets.ModalFadeTransition,
    headerLeft: null
  }

我还必须对左右组件进行以下更改...

<View style={{ flex: 0 }}>
  <Pressable onPress={toggleHamburger} style={{ padding: 8 }}>
    {isOpen ? <Icon name="close" size={24} color="#ffffff" /> : <Icon name="menu" size={24} color="#ffffff" />}
  </Pressable>
</View>

<View
  style={{
    flex: 0,
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 10,
    minWidth: 60,
    width: 60,
    maxWidth: 60
  }}
>
  {isConnected === false && <OfflineCloud />}
  {routeHasTimer(routeName) && <MaterialCommunityIcons name="timer-outline" size={24} color="#ffffff" />}
</View>