反应本机工具栏样式答案

【问题标题】：React native toolbar styling反应本机工具栏样式
【发布时间】：2018-01-22 10:07:12
【问题描述】：

我正在使用 react native 基础。我想在 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 应用于左右和 body 时，它没有任何变化，但将 flex:4 应用于 body 会显示标题但它没有居中

 <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>

结果：

应用居中对齐：

【问题讨论】：

标签： react-native styles

【解决方案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 结果

【讨论】：

我使用“TEST THIS NATIVE HEADERS”作为标题。
分享一下您在项目中包含的依赖包，然后我可能会为您提供其他想法...最好在没有任何线索或目的的情况下咨询您。如果继续这样下去，这个问题是无法解决的。或者，如果我能帮助你弄清楚，你应该尽可能地使用你的源代码。
这是我正在使用的：“native-base”：“^2.3.3”，“react”：“16.0.0”，“react-moment”：“^0.6.8 ”，“react-native”：“0.50.3”，“react-native-base”：“^1.1.0”，请参阅我使用的源代码与您的源代码相同，但我在 NEXUS S 上对其进行了测试，现在它坏了在它上面我已将图像添加到此答案中，您可以在编辑建议中查看它。

【解决方案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>

【讨论】：

请再次检查编辑答案...希望它可以帮助
标题粘在状态栏上。见上文，应用顶部填充不会在所有设备的中心显示标题。 @Seyha
嗨@devedv，你的代码也很好用。大佬请仔细看！！！
让您的标题文本有点长，例如：“鼓掌支持我们”也在 Nexus 5X 上进行测试。密度：420dpi 5.2"
看看你的标题文本被“.....”隐藏了，它没有完全显示。这就是我问如何解决它？谢谢