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>