反应导航标题包装答案

【问题标题】：react navigation title wrapped反应导航标题包装
【发布时间】：2018-02-11 01:16:52
【问题描述】：

使用反应导航，StackNavigator，简单的标题标题被包裹起来。如何显示完整的标题？在下面的代码中，标题是个人信息。但在 iPhone 5s 设备和模拟器上，标题并未完整显示。

版本：

“反应导航”：“^1.0.0-beta.11”
“反应原生”：“^0.47.2”

静态导航选项 = { 标题：“个人信息” };

【问题讨论】：

您可以使用 headerTitleStyle 设置标题部分的宽度，但它看起来很糟糕。使用 react 导航本身提供的节选标题是个好主意

标签： react-native react-navigation react-native-ios

【解决方案1】：

解决了。指定宽度与设备宽度匹配的 headerTitleStyle 解决它。

static navigationOptions = {
    title: "Personal Information",
    headerBackTitle : null,
    headerTitleStyle : {width : Dimensions.get('window').width}
};

【讨论】：

很好的解决方案。谢谢

【解决方案2】：

如果您的标题根据您作为参数传递给route 的内容动态更改，则标题不会被截断并且会溢出。为避免这种情况，您可以执行以下操作：

function truncate(str: string, n: number) {
  return str.length > n ? str.substr(0, n - 1) + '...' : str;
}

<YourStack.Screen
  name="MyScreen"
  component={MyScreen}
  options={({ route }) => ({
    title: truncate(route.params.yourObject.title, 15),
  })}
/>

truncate 是一个简单的函数，它接受一个数字，缩短您传入的字符串，并在其后添加“...”。

【讨论】：