首页 文章

如何垂直居中导航栏元素并删除右侧导航栏按钮？

提问于
浏览 次
0

我正在使用react-native-router-flux并设置了导航栏 . 目前，导航栏的样式高度低于默认高度，因此导航栏容器内的元素位于导航栏容器底部附近 .

我试过 navigationBarStyle={{backgroundColor: 'pink', height: 55, flex: 1, justifyContent: 'center'}} 但仍然没有运气 .

How can I vertically center the elements inside the navigation bar?

目前，右侧导航栏按钮 Settings 设置为导航到 Settings 组件 . 但是在 Settings 页面上，想要删除 Settings 右侧导航栏按钮 . How can I do so?

这是它的样子（带有粉红色背景的导航栏是容器，左侧抽屉按钮，场景 Headers （Home）和右侧的“设置”按钮靠近导航栏的底部）：

enter image description here

以下是代码：

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

Thank you in advance

javascript react-native uinavigationbar react-jsx react-native-router-flux

1 回答

  • 1

    你在找什么是 align-items: 'center'

    https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

    navStyle: { backgroundColor: 'pink', height: 55, flex: 1, flexDirection: 'row', alignItems: 'center' }

    使用检查器（模拟器中的命令d）将真正帮助您在您的react-native应用程序中调试未来的样式问题

    回复于

相关问题