React Native: 如何在NativeBase中居中控件

Question

我刚刚发现了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模拟器上的结果:

我该如何使用easy-grid在页面上垂直居中登录按钮？我已经尝试应用flexbox属性，但没有结果。

谢谢你的帮助。

- TheSoul

Answer 1

尝试更改为这个：

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

- max23_

---

非常感谢。它起作用了。但为什么它既没有在NativeBase网站上，也没有在EasyGrid上记录呢？ - TheSoul

不确定，可能他们只是记录了基础知识。 - max23_

自定义样式，涉及对齐和调整内容的方式，这些无法被记录在文档中。完全取决于用户。 - Supriya Kalghatgi

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>

- Adoel