React Native如何将Center与Native Base Component对齐

时间:2017-12-20 05:04:23

标签: react-native native-base

我正在使用原生基础作为我的反应本机项目,我尝试将所有内容的子项放在对齐中心但是它不起作用。任何人都可以告诉我如何使用本机基本组件吗?这是我的结果

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

enter image description here

1 个答案:

答案 0 :(得分:0)

对于有相同问题的人,只需使用<Content>道具centerContent={true} 将所有<Content>中的孩子包裹在<View>中。 / p>

在这种情况下,

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