0

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

前もって感謝します

4

1 に答える 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' }

インスペクター (シミュレーターで command+d) を使用すると、react-native アプリで将来のスタイリングの問題をデバッグするのに本当に役立ちます

于 2016-10-17T03:13:49.153 に答える