反应导航标题包裹

Question

使用 React 导航，StackNavigator，简单的 header 标题正在包装。如何显示完整标题？在下面的代码中，标题是个人信息。但是标题在 iPhone 5s 设备和模拟器上显示不完整。

版本：

"react-navigation": "^1.0.0-beta.11"
"react-native": "^0.47.2"

静态导航选项 = { 标题："Personal Information" };

Answer 1

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

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

Answer 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 是一个简单的函数，它接受一个数字，缩短您传入的字符串，然后添加“...”。

反应导航标题包裹

react navigation title wrapped

react-native

react-native-ios

react-navigation