react-native: NativeBase 如何使控件居中答案

【问题标题】：react-native: NativeBase how to center a controlreact-native: NativeBase 如何使控件居中
【发布时间】：2016-12-16 23:04:42
【问题描述】：

我刚刚发现了用于 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 属性但没有结果。

感谢您的帮助。

【问题讨论】：

标签： android react-native native-base

【解决方案1】：

试着改成这样：

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

【讨论】：

非常感谢。有效。但是为什么在 NativeBase 站点和 EasyGrid 上都没有记录。
不确定，可能他们只是记录基础知识。
自定义样式，与对齐和对齐内容相关，这些无法记录。这完全取决于用户。

【解决方案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>

【讨论】：