将标题居中对齐 [英] Align the Header in center

问题描述

反应导航:1.0.0-beta.11

反应:16.0.0-alpha.12

反应原生:0.47.1

我正在按照

更新代码:

static navigationOptions = ({ navigation }) =>({标题:`${navigation.state.params.name.item.name}`，标题标题样式:{颜色:'#000'，文本对齐:'居中'，alignSelf: '居中'}});

解决方案

titleStyle 属性已重命名为 headerTitleStyle 您现在可以通过 headerTitleStyle 设置标题标题的样式 将其传递给导航选项.

<代码>....标题标题样式:{颜色:'颜色值'，文本对齐:'居中'，alignSelf: 'center'//如果样式使用 flexbox}....

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

解决方案

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
}
....

这篇关于将标题居中对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！