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

Question

Я использую response-native-router-flux и настраиваю навигационную панель. В настоящее время панель навигации имеет меньшую высоту, чем высота по умолчанию, поэтому элементы внутри контейнера навигационной панели находятся на низком уровне, ближе к нижней части контейнера панели навигации.

Я пробовал navigationBarStyle={{backgroundColor: 'pink', height: 55, flex: 1, justifyContent: 'center'}}, но все еще не повезло.

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

И в настоящее время правая кнопка панели навигации, Settings настроена для перехода на компонент Settings. Но на странице Settings, вы хотите удалить правую навигационную панель Settings. Как я могу это сделать?

Вот как это выглядит (панель навигации с розовым фоном является контейнер, и левой кнопка ящика, название сцены (Home), и настройка кнопки справа сидят закрыть нижнюю часть панели навигации):

А вот код:

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

Спасибо заранее

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