React Native 如何将中心与原生基础组件对齐答案

【问题标题】：React Native How to align Center with Native Base ComponentReact Native 如何将中心与原生基础组件对齐
【发布时间】：2018-10-17 18:43:47
【问题描述】：

我正在为我的 react native 项目使用原生基础，我尝试将所有内容的子元素对齐中心，但它不起作用。谁能告诉我如何使用本机基础组件来做到这一点？这是我的结果

<Container  > 

        <Content  contentContainerStyle = { {display : 'flex',backgroundColor:'black', alignItems:'center',justifyContent:'center',flex:1} } >

        <Item >
          <Input placeholderTextColor = 'white'   placeholder = 'Số điện thoại di động'/> 
        </Item>
         <Item>
         <Input placeholderTextColor = 'white'  placeholder = 'Mật khẩu'/> 
       </Item>
       <Button bordered light >
        <Text style = { {color:'white'} } >Đăng nhập</Text>
      </Button>
      <Grid>
        <Col ><Label  style = { {color:'white'} } >Bạn chưa có tài khoản?</Label></Col>
        <Col ><Label  style = { {color:'white'} }>ĐĂNG KÝ</Label></Col>
      </Grid>
       </Content>

【问题讨论】：

标签： react-native native-base

【解决方案1】：

对于那些有同样问题的人，只需使用<Content> props centerContent={true} 或将您的<Content> 中的所有孩子包裹在<View> 中。

在这种情况下，

<Content
  contentContainerStyle={{
     backgroundColor: "black",
     justifyContent: "center",
     flex: 1
  }}
>
  <View>
     <Item>
        <Input placeholderTextColor="white" placeholder="Số điện thoại di động" />
     </Item>
     <Item>
        <Input placeholderTextColor="white" placeholder="Mật khẩu" />
     </Item>
     <Button bordered light>
         <Text style={{ color: "white" }}>Đăng nhập</Text>
     </Button>
     <Grid>
         <Col>
             <Label style={{ color: "white" }}>Bạn chưa có tài khoản?</Label>
         </Col>
         <Col>
             <Label style={{ color: "white" }}>ĐĂNG KÝ</Label>
         </Col>
     </Grid>
  </View>
</Content>

【讨论】：