Question

我正在使用反应原生基础。我想在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>

编辑：应用flex：1并将中心对齐到身体

Answer 1

您可以将 justifyContent 和 alignItems 用于中心，如下所示flex:1：

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

Answer 2

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

}

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

反应本机基本标题中心对齐

2 个答案: