我正在使用react-native-router-flux并设置了导航栏。目前,导航栏的高度比默认高度短,因此导航栏容器内的元素位置较低,靠近导航栏容器的底部。
我尝试了 navigationBarStyle={{backgroundColor: 'pink', height: 55, flex: 1, justifyContent: 'center'}}
但仍然没有运气。
如何使导航栏中的元素垂直居中?
目前,右侧导航栏按钮 Settings
设置为导航到 Settings
组件。但在Settings
页面上,想删除Settings
右侧导航栏按钮。 我该怎么做?
它的外观如下(粉红色背景的导航栏是容器,左侧的抽屉按钮、场景标题(主页)和右侧的“设置”按钮靠近导航栏的底部):
这是代码:
const RouterWithRedux = connect()(Router)
const store = configureStore()
export default class App extends Component {
constructor() {
super()
}
render() {
return (
<Provider store={store}>
<RouterWithRedux>
<Scene key='root'>
<Scene component={Login} hideNavBar initial={true} key='login' sceneStyle={{backgroundColor: 'black'}} title='Login' type='reset'/>
<Scene key='drawer' component={NavDrawer} open={false}>
<Scene key="main" navigationBarStyle={{backgroundColor: 'pink', height: 55, flex: 1, justifyContent: 'center'}} onRight={() => Actions.settings()} rightTitle='Settings'>
<Scene
component={Home}
initial={true}
key='home'
sceneStyle={{backgroundColor: 'black'}}
title='Home'
type='reset'
/>
<Scene
component={Settings}
direction='vertical'
key='settings'
sceneStyle={{backgroundColor: 'black'}}
title='Settings'
/>
</Scene>
</Scene>
</Scene>
</RouterWithRedux>
</Provider>
)
}
}
提前致谢
最佳答案
您正在寻找的是align-items: 'center'
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
导航样式:{
背景颜色:'粉红色',
高度:55,
弹性:1,
flexDirection: '行',
对齐项目:'居中'
}
使用检查器(模拟器中的command+d)将真正帮助您调试react-native应用程序中 future 的样式问题
关于javascript - 如何垂直居中导航栏元素并删除右侧导航栏按钮?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40076114/