反应原生工具栏样式 [英] React native toolbar styling
问题描述
我使用的是 react native base.我想在 iOS 和 android 中居中对齐标题，因为文本很长，它用..."隐藏它.
我尝试了不同的选项无法修复它.我该如何解决?
代码:
<图标名称="箭头后退"/></按钮></左><身体><Title>鼓掌支持我们</Title></身体><右><按钮透明 onPress={()=>this.navigateCustom("DrawerOpen") }><IconEvil name={"menu"} style={{ color: "rgb(255,255,255)", fontSize:30}}/></按钮></右></标题> 当我将 flex:1 应用到 left right 和 body 时，它什么都没有改变，但是将 flex:4 应用到 body 会显示标题，但它没有居中
<图标名称="箭头后退"/></按钮></左><Body style={{flex:4}}><Title>鼓掌支持我们</Title></身体><Right style={{flex:1}}><按钮透明 onPress={()=>this.navigateCustom("DrawerOpen") }><IconEvil name={"menu"} style={{ color: "rgb(255,255,255)", fontSize:30}}/></按钮></右></标题> 结果:
应用中心对齐:
这是我在我的设备 ios 模拟器、三星 Galaxy S7Edge 和模拟器上测试过的.
import React, { Component } from 'react';import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';导出默认类 App 扩展组件 {使成为() {返回 (<容器><标题><左样式={{ flex: 1 }}><按钮透明><图标名称='箭头返回'/></按钮></左><Body style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}><标题>标题中心</标题></身体><Right style={{ flex: 1 }}><按钮透明><图标名称='菜单'/></按钮></右></标题></容器>);}}<块引用>
这是我测试过的结果.
我建议您检查您的 React-Native 包版本并进行比较.
<块引用>这是我的最新版本:
"native-base": "^2.3.6",反应":16.2.0"，反应原生":0.52.0"，代码:
import React, { Component } from 'react';import { Container, Header, Left, Body, Right, Button, Icon, Title } from 'native-base';导出默认类 App 扩展组件 {使成为() {返回 (<容器><标题><左样式={{ flex: 1 }}><按钮透明><图标名称='箭头返回'/></按钮></左><Body style={{ flex: 4, justifyContent: 'center', alignItems: 'center' }}><标题>标题中心</标题></身体><Right style={{ flex: 1 }}><按钮透明><图标名称='菜单'/></按钮></右></标题></容器>);}}NEXUS S 结果
I’m using react native base. I want to centre align the title in iOS and android both, since text is long it hides it with "…".
I've tried different option unable to fix it. How can I fix it?
Code:
<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>
EDIT:
When I apply flex:1 to left right and body it changes nothing but applying flex:4 to body shows the title but it’s not centred
<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>
Result:
Applying center alignment:
This is what i have tested on my device ios simulator, and Samsung Galaxy S7Edge and emulator.
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>
);
}
}
This is what i have tested and result.
I recommend you to check your React-Native package version and compare.
Here my last version:
"native-base": "^2.3.6",
"react": "16.2.0",
"react-native": "0.52.0",
EDIT: CODE:
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
这篇关于反应原生工具栏样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
