React native 使用flex将图元居中：0*

是否可以使用flexbox将属性为flex:0.*的元素水平居中？我有这样的代码。这是我当前解决方案的JSX。这是中心元素的正确方法吗

<View style={{flex: 1, flexDirection: 'column', justifyContent: 'center', alignItems: 'center', backgroundColor: 'tomato'}}>
    <View style={{alignItems: 'center', marginBottom: 20}}>
        <Text style={{fontSize: 18, textAlign: 'center'}}>Hello, User</Text>
        <Text style={{fontSize: 16, textAlign: 'center'}}>Enter your email to continue</Text>
    </View>

    <TextInput
        placeholder='Enter email'
        onChangeText={this.onEmailChange.bind(this)}
        value={this.props.email}
        style={{height: 40, borderWidth: 2, borderColor: 'black', width: Dimensions.get('window').width * .7, padding: 8, marginLeft: Dimensions.get('window').width * .15}}
    />
</View>  

你好，用户
输入您的电子邮件以继续

我认为您没有获得flexbox风格的样式

Flexbox处理的是比率，而不是预定义的值

例如：

使用flexbox进行造型将很容易， 功能如下：

   border(color){
    return{
        borderColor:color,
        borderWidth:4,
      }
    }

<View style={[styles.container,this.border('yellow')]}>
    <View style={[styles.topContainer, this.border('red')]}>
        <View style={[styles.topContainerLeft,this.border('brown')]}>
          <View style={[styles.topContainerLeftLeft,this.border('blue')]}>
              <Text>TopLeftLeft</Text>
          </View>
          <View style={[styles.topContainerLeftRight,this.border('violet')]}>
              <Text>TopLeftRight</Text>
          </View>
        </View>
        <View style={[styles.topContainerRight,this.border('green')]}>
            <Text>TopRight</Text>
        </View>
    </View>
    <View style={[styles.bottomContainer, this.border('black')]}>
      <View style={[styles.bottomContainerLeft,this.border('brown')]}>
          <Text>BottomLeft</Text>
      </View>
      <View style={[styles.bottomContainerRight,this.border('green')]}>
          <Text>BottomRight</Text>
      </View>
    </View>
  </View>


const styles = StyleSheet.create({
  container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
  },
   topContainer:{
flex:3,
  flexDirection:'row',
  alignItems:'center',
  justifyContent:'center',

},
   bottomContainer:{
  flex:5,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',

},
topContainerLeft:{
  flex:2,
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',
},
topContainerRight:{
    flex:4,
    alignItems:'center',
    justifyContent:'center',
},
bottomContainerLeft:{
    flex:2,
    alignItems:'center',
    justifyContent:'center',
},
bottomContainerRight:{
    flex:5,
    alignItems:'center',
    justifyContent:'center',
},
topContainerLeftLeft:{
  flex:1,
    alignItems:'center',
    justifyContent:'center',
},
topContainerLeftRight:{
  flex:3,
  alignItems:'center',
  justifyContent:'center',
}

});

边框（颜色）{
返回{
边框颜色：颜色，
边框宽度：4，
}
}
左上角
左上右
右上角
左下角
右下角
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“居中”，
背景颜色：“#F5FCFF”，
},
顶部容器：{
弹性：3，
flexDirection:“行”，
对齐项目：'中心'，
辩护内容：'中心'，
},
底部容器：{
弹性：5，
flexDirection:“行”，
对齐项目：'中心'，
辩护内容：'中心'，
},
topContainerLeft：{
弹性：2，
flexDirection:“行”，
对齐项目：'中心'，
辩护内容：'中心'，
},
topContainerRight：{
弹性：4，
对齐项目：'中心'，
辩护内容：'中心'，
},
底部容器左侧：{
弹性：2，
对齐项目：'中心'，
辩护内容：'中心'，
},
底部容器右侧：{
弹性：5，
对齐项目：'中心'，
辩护内容：'中心'，
},
顶部容器左侧：{
弹性：1，
对齐项目：'中心'，
辩护内容：'中心'，
},
topContainerLeftRight：{
弹性：3，
对齐项目：'中心'，
辩护内容：'中心'，
}
});

相应的结果是

希望这有帮助