Question

我正在使用反应原生基础。我想在iOS和Android中心对齐标题，因为文本很长，它用“......”隐藏它。

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

代码：

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

    <Body>
     <Title>CLAP TO SUPPORT US</Title>
   </Body>

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

编辑：

当我将flex：1应用于左侧和身体时，除了应用flex之外，它只会改变：4对于身体显示标题但是它没有居中

 <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:4}}>
     <Title>CLAP TO SUPPORT US</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>

结果：

应用中心对齐：

Answer 1

这是我在我的设备ios模拟器和三星Galaxy S7Edge和模拟器上测试过的。

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body  style={{ flex: 4,  justifyContent: 'center', alignItems: 'center'  }}>
            <Title>Title Center</Title>
          </Body>
          <Right  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

这是我测试过的结果。

我建议您查看React-Native软件包版本并进行比较。

这是我的上一个版本：

"native-base": "^2.3.6",
"react": "16.2.0",
"react-native": "0.52.0",

编辑：代码：

import React, { Component } from 'react';
import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';
export default class App extends Component {
  render() {
    return (
      <Container>
        <Header>
          <Left  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='arrow-back' />
            </Button>
          </Left>
          <Body  style={{ flex: 4,  justifyContent: 'center', alignItems: 'center'  }}>
            <Title>Title Center</Title>
          </Body>
          <Right  style={{ flex: 1 }}>
            <Button transparent>
              <Icon name='menu' />
            </Button>
          </Right>
        </Header>
      </Container>
    );
  }
}

NEXUS S RESULT

Answer 2

React Native（NativeBase）遵循Android和iOS指南，

标题位于 Android 标题的左侧， iOS 的中心。

如果您希望它位于中心，请申请：

flex：1 至<Left>，<Body>和<Right>

示例：

<Left style={{ flex: 1 }}>
</Left>

<Body style={{ flex: 1,  justifyContent: 'center', alignItems: 'center' }}>
    <Title>Home</Title>
</Body>

<Right style={{ flex: 1 }}>
</Right>

反应原生工具栏样式

2 个答案: