无法使用NativeBase将按钮水平居中

Question

也发布在https://github.com/GeekyAnts/NativeBase/issues/1394

尝试使用Native Base将按钮水平居中。

您知道以下原因为何不起作用吗？

2018-09-06 15:59:00

也尝试过这种方法，也没有用：

SELECT *
  FROM (`todolist`)
  WHERE `type` = '2' AND
        user_id = '1' AND
        DATEADD(minute, -5, GETDATE())

Answer 1

<Button info style = {{padding: '10%', alignSelf: 'center'}}> 
<Text>LOGIN</Text>
</Button> 

我只需使用（alignSelf：'center'）就能将按钮移到中心。

Answer 2

您可以通过添加Left和Right标签来尝试以下操作

     <Container style={{flex: 1, alignItems: 'center'}}>
        <Content padder>
          <Card>
            <CardItem>
              <Left/>
              <Button style={{ margin: 10 }} danger>
                <Text> Go to Welcome Tab </Text>
              </Button>
              <Right/>
            </CardItem>
            <CardItem>
              <Left/>
              <Button style={{ margin: 10 }} warning>
                <Text> Go to Main Tab </Text>
              </Button>
              <Right/>
            </CardItem>
            <CardItem>
              <Left/>
              <Button style={{ margin: 10 }} success>
                <Text> Open Drawer </Text>
              </Button>
              <Right/>
            </CardItem>
          </Card>
        </Content>
      </Container>

Answer 3

显示按钮的另一种方法是：

   <Container style={{ flex: 1, alignItems: 'center' }}>
      <Content padder>
        <Card style={{ alignItems: 'center' }}>
          <Button block style={{ margin: 10 }} danger>
            <Text> Go to Welcome Tab </Text>
          </Button>
          <Button block style={{ margin: 10 }} warning>
            <Text> Go to Main Tab </Text>
          </Button>
          <Button block style={{ margin: 10 }} success>
            <Text> Open Drawer </Text>
          </Button>
        </Card>
      </Content>
   </Container>