react-native：NativeBase如何集中控件

Question

我刚刚发现了NativeBase for react-native，我真的很喜欢它。我正在关注他们网站上的教程。据我所知，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模拟器上的结果：

如何使用easy-grid垂直居中页面上的登录按钮？我试图在没有结果的情况下应用flexbox属性。

感谢您的帮助。

Answer 1

尝试更改为：

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

Answer 2

我也尝试此代码：

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