React native 反应导航标题已包装

使用react导航，StackNavigator，简单标题将被包装。如何显示完整的标题？在下面的代码中，标题是个人信息。但是这个标题并没有在iPhone5S设备和模拟器上完全显示出来

版本：

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

“本机反应”：“^0.47.2”

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

解决了这个问题。 指定宽度与设备宽度匹配的headerTitleStyle以解决此问题

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

---

如果您的标题根据您作为参数传递给

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),
  })}
/>

函数截断（str:string，n:number）{
返回str.length>n？str.substr（0，n-1）+’…'：str；
}
({
标题：截断（route.params.yourObject.title，15），
})}
/>

---

truncate

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

您可以使用headerTitleStyle设置标题节宽度，但它看起来很糟糕。使用react导航本身提供的摘录标题是一个很好的理想解决方案。谢谢