您的位置：首页 > Web前端 > React

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

2017-04-11 15:09 573 查看
版权声明：本文为博主原创文章，未经博主允许不得转载。

目录（？）[+]

废话不多说，学以致用！
上代码〜
使用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,
"pad
4000
dingRight" : 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
组件，并传入了一些参数，这个结合上边的解释，想必大家都明白了..

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航