React Native－4.React Native布局属性练习之flexBox模型实战

废话不多说，学以致用！
上代码～

使用react native init 创建的项目中，在index.ios.js中编写的代码：

wxsPrj 是我的工程名字，如果你的工程名字是xxx，那么请把下列代码中出现的所有wxsPrj 换成你的xxx 然后覆盖原来index.ios.js 中的所有代码，运行一下，得到的效果如下图所示：

'use strict';

var React = require('react-native');
var {
  AppRegistry,StyleSheet,Text,View,} = React;

var BoxStyles = StyleSheet.create({
    "height50": {
        height : 50,},"height400": {
        height : 400,"width400" : {
        width : 400,"bgred" : {
        backgroundColor : "#6AC5AC","box" : {
        flexDirection : "column",flex: 1,position : "relative","centerView" : {
        flexDirection: "row",flex : 1,justifyContent : "space-between","label" : {
        top: 0,left: 0,paddingTop : 0,paddingRight: 3,paddingBottom : 3,position : "absolute",backgroundColor : "#FDC72F","top" : {
        justifyContent : "center",alignItems : "center","bottom" : {
        justifyContent: "center","right" : {
        justifyContent:"space-around",width : 50,"left" : {
        justifyContent: "space-around",width: 50,alignItems: "center","margginBox" : {
        "position" : "absolute","top" : 100,"paddingLeft" : 7,"paddingRight" : 7,})

var Box = React.createClass({
    render:function(){
        return(
        <View style = {[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
            <View style = {[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}>
                <Text>top</Text>
            </View>

        <View style={[BoxStyles[this.props.childName]]}>
            <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}>
                <Text>left</Text>
            </View>
            <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}>
                <Text>right</Text>
            </View>
        </View>

        <View style={[BoxStyles.bottom,BoxStyles[this.props.classBg]]}>
            <Text>bottom</Text>
        </View>

        <View style={[BoxStyles.label]}>
            <Text>{this.props.boxName}</Text>
        </View>
   </View>
    )
  }

})
var MargginBox = React.createClass({
    render : function(){
        return (
        <View style={[BoxStyles.margginBox]}>
            <Box childName="centerView" height="height400" width="width400" boxName="margin" classBg="bgred">
                {this.props.children}
            </Box>
        </View>
        )
    }

})

var wxsPrj = React.createClass({
  render: function() {
    return (
        <MargginBox></MargginBox>
    )}
})

AppRegistry.registerComponent('wxsPrj',() => wxsPrj);

代码详解：

BoxStyles

var BoxStyles = StyleSheet.create
创建一个样式列表，里边是我们所能用到的一些控件的样式，就像我们在iOS中编写一个.h文件一样，统一的去管理一些常用或常改的变量一样。内容含义观看我上几篇对应的博客会有详细的理解。

Box

var Box = React.createClass
这里创建一个组件，这个组建就是盒子模型的详细实现过程，各种view之间的嵌套和样式的嵌套，也不难理解。
这里边使用到了类似this.props.classBg,this.props.boxNam的写法，我们来说明一下：

this

this我们完全可以等同的理解为iOS 中的self指针。

props

这个变量，它是组件中一个自动生成的类似数组的变量，它是一个对象，用来组件接收外面传进来的参数，组件内部是不允许修改自己的props,只能通过父组件来修改。
这个变量是在组件初始化阶段就被自动创建的。你大可认为它是一个数组，外边传进来的参数全部存放在里边。记录组件的属性。

this.props.classBg

它的意思就是说我在props中取得classBg这个属性，那么这个属性我们是没有定义，那么从哪里来的，正如上边所说，props记录的是外边传进来的属性。那么我们在使用Box组件的时候需要给他传一个classBg的参数。

MargginBox

这个才是我们最中想要的组件，我们不难发现，我们在其中使用了Box组件，并传入了一些参数，这个结合上边的解释，想必大家都明白了。。