0

我将我的应用程序更新为 React Navigation 6。在我的所有屏幕中,我自定义了headerBackImage,并添加了一些headerRight带有文本的内容。在 React Navigation 5 中,如果headerTitle太长,它会被直接截断,并在标题末尾添加 ...,如下所示:

在此处输入图像描述

但是在 React 导航 6 中,这个特性看起来发生了变化。我添加了一些 backgroundColor 来向您展示 Header 的切割:

在此处输入图像描述

我看到了那个话题:React Native Navigation Header title too long, end up overflowing,但可能V6中增加了一个新的道具。

这是我的屏幕:

<ProfileStack.Screen
    options={({ navigation }: ScreenProps) => ({
        headerTitle: 'My header title is not truncated why ?',
        headerTitleStyle: {
            backgroundColor: EColors.rouge,
        },
        headerBackImage: () => (
            <BackButton />
        ),
        headerTitleAlign: 'center',
        headerBackTitle: ' ',
        headerRight: () => (
            <Text
                onPress={() => navigation.navigate('toOtherScreen')}
                style={{ marginRight: 20, backgroundColor: EColors.vert }}
            >
                Infos
            </Text>
        ),
    })}
    name="screenName"
    component={ComponentName}
/>

有人在 RN V6 中遇到过吗?

4

0 回答 0