React Native Center 对齐 Body 标题文本

Question

如何在原生基础中将标题文本居中？

<Header>
  <Left style={{flex:1}}>
    <Button
       transparent
       onPress={() => NavigationService.navigate('Home')}
    >
      <Icon name='arrow-back' />
    </Button>
    </Left>
    <Body style={{flex:1}}>
      <Title>Vacancy Snapshot</Title>
    </Body>
</Header>

上面的结果是文本右对齐。如果我在 Body 之后包含 Right 标签 <Right style={{flex:1}} />，它会使文本居中，但不会显示整个文本：

Answer 1

通过包含 <Right style={{flex:1}}/>，标题文本将居中。并将 flex 从 1 增加到 3 以便可以显示文本的全长，如下所示：

<Header>
  <Left style={{flex:1}}>
    <Button
      transparent
    >
      <Icon name='arrow-back' />
    </Button>
    </Left>
    <Body style={{flex:3}}>
      <Title>Vacancy Snapshot</Title>
    </Body>
    <Right style={{flex:1}}/>
</Header>

我还提供了一份世博会小吃 here 以供进一步试验。玩得开心！

React Native Center 对齐 Body 标题文本

React Native Center align Body Title text

react-native

native-base