react-native - React Native Navigation Header 标题太长，最终溢出

Question

我一直在跟进 React Native 的教程，现在我的输出与视频的不同。

您基本上是从上一个屏幕获取标题参数，然后将其显示在标题标题上，如果太长，他会被截断，但我的只是重叠了所有内容，我认为只是手动截断字符串，但长度会有所不同屏幕，所以我想知道是否有人可以为我指明正确的方向，我将不胜感激。

这是组件的代码:

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,
  };
};

，这是输出:output

Answer 1

将此添加到您的返回值
return{ headerTitleContainerStyle:{ width:'60%', alignItems:'center'
},}
然后，您可以使用此导航选项调整标题标题宽度