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

来源：互联网发布：java 读取hdfs文件编辑：程序博客网时间：2024/05/16 18:28

版权声明：本文为博主原创文章，未经博主允许不得转载。

目录（？）[+]

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

使用React Native init创建的项目中，在索引中。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",        alignItems : "center",    },    "right" : {        justifyContent:"space-around",        width : 50,        alignItems : "center",    },    "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.height50,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);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130

代码详解：

BoxStyles

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

框

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

`this`

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

`props`

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

`this.props.classBg`

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

MargginBox

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

0 0