Как вертикально центрировать элементы навигационной панели и удалить правую кнопку навигационной панели?

Я использую 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>
    )
  }
}

Заранее спасибо


react-native javascript uinavigationbar react-native-router-flux react-jsx
person Community    schedule 16.10.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

То, что вы ищете, это 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 в симуляторе) действительно поможет вам отладить будущие проблемы со стилем в вашем приложении, ориентированном на реакцию.

person Maxwelll    schedule 17.10.2016
comment
Я попробовал, но все равно то же самое. - person ; 17.10.2016
comment
Не уверен, что вы здесь делаете неправильно... align-items: 'center' определенно то, как вы центрируете объекты по вертикали в гибкой строке... см. мой базовый пример здесь для большей ясности rnplay.org/apps/7sjakw - person Maxwelll; 17.10.2016
comment
@MaxwellLasky Это очень странно. Возможно ли, что это не работает с navigationBarStyle? Вы не против попробовать? Несколько раз пробовал, но ничего не изменилось. - person ; 18.10.2016
comment
Это очень странно. Возможно ли, что это не работает с navigationBarStyle? Вы не против попробовать? Я пробовал это несколько раз, но ничего не изменилось. - person ; 18.10.2016