反应导航标题包裹

Question

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

版本：

1. “react-navigation”：“^ 1.0.0-beta.11”

2. “react-native”：“^ 0.47.2”

   static navigationOptions = {     标题：“个人信息” };

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