web-dev-qa-db-ja.com

react-native：NativeBaseコントロールを中央に配置する方法

私はreact-native用のNativeBaseを発見したばかりで、本当に気に入っています。私は彼らのウェブサイトからチュートリアルに従っています。 NativeBaseがレイアウトにEasy-Gridを使用していることを理解しています。ページのボタンを垂直方向の中央に配置したいと思います。これは、私が構築しているテストアプリケーションのシンプルなインターフェイスです。

          <Container> 
                <Header>
                    <Button trnsparent>
                        <Icon name='ios-menu' />
                    </Button>

                    <Title>Poki</Title>

                </Header>

                <Content style={{padding: 10}}>  

                    <Grid>
                        <Col>
                            <Button block bordered info style={{flex: 1}}>                         
                                Login 
                            </Button>
                        </Col>
                    </Grid>


                </Content>

                <Footer>
                    <FooterTab>
                        <Button transparent>
                            <Icon name='ios-call' />
                        </Button>  
                    </FooterTab>
                </Footer>
            </Container>

そして、これは私のgenymotionエミュレーターでの結果です： enter image description here

イージーグリッドを使用して、ログインボタンをページの垂直方向の中央に配置するにはどうすればよいですか？ flexboxプロパティを適用しようとしましたが、結果がありません。

ご協力ありがとうございました。

androidreact-nativenative-base
7
TheSoul

これに変更してみてください：

<Content contentContainerStyle={{flex: 1}} style={{padding: 10}}>
  <Grid style={{alignItems: 'center'}}>
    <Col>
      <Button block bordered info>
        Login
      </Button>
    </Col>
  </Grid>
</Content>
15
max23_

そして、私はこのコードも機能するようにします：

           <Grid >
              <Col>
                <Row>
                  <Text>Ananta Riding Club</Text>
                </Row>
              </Col>

              <Col contentContainerStyle={{flex: 1}}>
                <Row style={{justifyContent: 'flex-end'}}>
                  <Text >07.00 AM</Text>  
                </Row>
              </Col>
            </Grid>
0
Adoel