Align the Header in center

问题

react-navigation: 1.0.0-beta.11

react: 16.0.0-alpha.12

react-native: 0.47.1

I'm following the ReactNavigation tutorial to render the Header from a passed prop to the screen.

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>
    );
  }
}

I want the title in title: Chat with ${navigation.state.params.user} to appear in the center. How do I style it? I also want change it's color.

I tried this suggestion but did not work.

Many thanks.

After updating the code, it's aligning to the center but it's not quite the center. It's more to the right. I think it's cause of the arrow to the left, how can I fix it?

Updated Code:

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

回答1:

titleStyle property has been rename to headerTitleStyle You can now style you header title via headerTitleStyle by passing it to navigation options.

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

回答2:

If your screen has headerLeft or Back button,

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

is not enough to make center title.
You have to use headerRight: (<View></View>) to appear at center.

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

来源：https://stackoverflow.com/questions/45699163/align-the-header-in-center

标签

reactjs

react-native

react-navigation