无法使用 NativeBase 水平居中按钮

Question

也发表于https://github.com/GeekyAnts/NativeBase/issues/1394

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

知道以下为什么不起作用吗？

       <Container style={{ backgroundColor: '#fff', paddingTop: 100, alignItems: 'center' }}>
          <Content>
              <Button style={{ margin: 10 }}>
                <Text> Short Text </Text>
              </Button>
              <Button style={{ margin: 10 }}>
                <Text> Very Long Text</Text>
              </Button>
              <View style={{ marginTop: 50 }}>
              </View>
          </Content>
       </Container>

也试过这个，也没用：

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

Answer 1

您可以尝试以下操作，方法是添加 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 2

另一种显示按钮的方法如下：

   <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>

Answer 3

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

我只需使用 ( alignSelf: 'center' ) 就可以在中心移动按钮。

无法使用 NativeBase 水平居中按钮

Cannot Center Buttons horizontally with NativeBase

react-native

native-base