React Native基础标题居中对齐

Question

React Native基础标题居中对齐

5

我是一个使用React Native Base的辅助工具。我想要在iOS和Android上都将标题居中对齐，因为文本很长，会用“…”隐藏它。应用flex:3可以完全显示标题，但无法使其居中对齐。即使应用alignItems：'center'，alignSelf：'center'也没有帮助。

我尝试了不同的选项，但无法解决它。我该如何解决它？

代码：

 <Header  iosStatusbar="light-content" androidStatusBarColor='#000' >
<Left style={{flex:1}}>
<Button transparent onPress={() =>  this.navigateCustom("goBack")}>
 <Icon name="arrow-back" />
 </Button>
</Left>

    <Body style={{flex:3,}}>
     <Title>THIS IS A LONG TITLE TEST</Title>
   </Body>

  <Right style={{flex:1}}>
  <Button transparent onPress={()=> this.navigateCustom("DrawerOpen") }>
     <IconEvil  name={"menu"}  style={{ color: "rgb(255,255,255)", fontSize:30}}/>
     </Button>
  </Right>
      </Header>

编辑：在 body 应用了 flex:1 和居中对齐后

- devedv

2个回答

3

headerTitleStyle:{
      flex:0.8,
      textAlign: 'center',
      alignSelf: 'center',

}

现在，您可以通过将headerTitleStyle传递给导航选项来样式化标题。

- usman ali

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lotus91 · Accepted Answer

您可以使用justifyContent和alignItems两个属性，通过设置flex:1来实现以下内容的居中显示：

 <Body style={{ flex: 1,  justifyContent: 'center', alignItems: 'center' }}>
   <Title>THIS IS A LONG TITLE TEST</Title>
 </Body>