我将我的应用程序更新为 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 中遇到过吗?