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仿真結果：

我如何使用垂直居中瞭解快速我的網頁上登錄按鈕格？我試圖應用flexbox屬性沒有結果。

謝謝你的幫助。

Answer 1

嘗試更改爲此：

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