react-native - react 原生基本标题中心对齐

标签 react-native native-base

我正在使用 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>

编辑:
将 flex:1 和居中对齐到 body 后
enter image description here

最佳答案

您可以使用 justifyContent 对齐项目 都到 中心像下面 flex:1 :

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

关于react-native - react 原生基本标题中心对齐,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48397771/

相关文章:

reactjs - 有没有 Ionicons : Icon props?

javascript - native 基础 3 : Onpress for MenuItem

native-base - 我可以使用带有原生基础的 react native 元素 UI 吗?

reactjs - 如何在没有Expo的情况下安装react-native-svg-transformer?

javascript - 使消息消失。 react native

react-native - 更新 React Native 后 React Native 版本不匹配

react-native - 更改输入组件的 NativeBase 主题中的字体大小

react-native - 如何在 Native Base 中删除页眉的底线和页脚的顶线?

reactjs - 如何在 NativeBase 中渲染数组中的卡片项?

react-native - React Native - 每封邮件发送照片