React native React本机导航标题太长，最终溢出

我一直在关注React Native的教程，现在我的输出与视频有所不同

你基本上是从上一个屏幕上获取你的title参数，然后显示在标题上，如果标题太长，他的标题会被截断，但我的标题会重叠所有内容，我考虑过手动截断字符串，但在不同的屏幕上长度会不同，所以我想知道是否有人能给我指出正确的方向，我非常感激

这是组件的代码：

const MealDetailScreen = props => {
  const mealId = props.navigation.getParam("mealId");
  const meal = MEALS.find(meal => meal.id === mealId);

  return (
    <View style={styles.screen}>
      <Text>This is the {meal.title}!</Text>
      <Button title="Back" onPress={() => props.navigation.goBack()} />
    </View>
  );
};

MealDetailScreen.navigationOptions = navigationData => {
  const mealId = navigationData.navigation.getParam("mealId");
  const meal = MEALS.find(meal => meal.id === mealId);

  return {
        headerTitle: meal.title,
  };
};

---

，这是输出：

根据标题的长度动态剪切标题会对您有所帮助

return {
    headerTitle: meal.title.length >= 25 ? meal.title.slice(0, 24) + "..." : meal.title
};

---

将其添加到您的返回值中

返回{ headerTitleContainerStyle：{ 宽度：'60%'， 对齐项目：'center' }，}

---

然后，您可以使用此导航选项调整标题宽度

我也遇到了同样的问题。然而，我使用的是react导航v5

我的主要解决方案是设置maxWidth

头饰样式：{ 最大宽度：250，

---

}，请将代码添加为文本而不是图像，以便于帮助you@MaartenDev对不起，刚刚更新了我的帖子