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

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

Answer 2

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

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

Answer 3

我有同样的问题。但是，我正在使用React Navigation v5。

我的主要解决方法是设置maxWidth。

  headerTitleStyle: {
    maxWidth: 250,
  },

为了达到良好的效果，我还添加了以下内容：

headerTitleAlign: 'center'

https://reactnavigation.org/docs/stack-navigator/#headertitlealign

反应本机导航标题标题过长，最终溢出

3 个答案: