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 属性但没有结果。

感谢您的帮助。

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>

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

react-native: NativeBase how to center a control

android

react-native

native-base