将标题对齐在中心

Question

react-navigation：1.0.0-beta.11

反应：16.0.0-alpha.12

react-native：0.47.1

我按照ReactNavigation教程将Header从传递的道具渲染到屏幕上。

class ChatScreen extends React.Component {
  static navigationOptions = ({ navigation }) => ({
    title: `Chat with ${navigation.state.params.user}`,   // <- Talking bout this
  });
  render() {
    const { params } = this.props.navigation.state;
    return (
      <View>
        <Text>Chat with {params.user}</Text>
      </View>
    );
  }
}

我希望title中的title: Chat with ${navigation.state.params.user}出现在中心。我该如何设计呢？我也想改变它的颜色。

我试过这个suggestion但是没有用。

非常感谢。

更新代码后，它会与中心对齐，但它并不是中心。它更右边。我认为这是左箭头的原因，我该如何解决？

更新代码：

static navigationOptions = ({ navigation }) => ({
    title: `${navigation.state.params.name.item.name}`,
    headerTitleStyle: {
    color: '#000',
    textAlign: 'center',
    alignSelf: 'center'
    }
});

Answer 1

titleStyle媒体资源已重命名为headerTitleStyle您现在可以通过将headerTitleStyle传递给导航选项来为您设置标题标题的样式。

....
headerTitleStyle: {
      color: 'color value',
      textAlign: 'center',
      alignSelf: 'center' //if style using flexbox
}
....

Answer 2

如果您的屏幕有 headerLeft 或 后退按钮 ，

headerTitleStyle: {
  textAlign: "center",
  alignSelf: "center"
}

不足以成为中心冠军。
您必须使用headerRight: (<View></View>)出现在中心。

 static navigationOptions = {
    headerTitleStyle: {
      textAlign: "center",
      alignSelf: "center"
    }
    headerRight: <View><View />
  };

Answer 3

根据React Navigation 5.x

您必须使用 headerTitleAlign 将标题居中。在android中，它的默认值为left，在iOS中，它的值为center。

<Stack.Navigator
  initialRouteName='Welcome'
  screenOptions={{
    headerTitleStyle: {
      color: 'white',
      fontSize: 20,
    },
    headerTitleAlign: 'center',
  }}
>
  <Stack.Screen name='Welcome' component={Welcome}/>
</Stack.Navigator>

更多详情：https://reactnavigation.org/docs/stack-navigator/#headertitlealign