ReactNative初学笔记1.1flexbox布局

本人只粗略了解标签语言，至于html5，js，css啥的完全外行。我认为ReactNative是移动App开发的趋势，作为一个iOS开发工程师，深知原生开发的局限性，从今天起，像个孩子一样学习RN。使用教材《React Native入门与实践》

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

var BoxStyle = StyleSheet.create({

"height50": {
height: 50,
},

"height400": {
height: 400,
},

"width400": {

width: 300,
},

"bgred": {
backgroundColor: "#6AC5AC",
},

"box": {
flexDirection: "column",
flex: 1,
position: "relative",
},

"label": {
top: 0,
left: 0,
paddingTop: 0,
paddingRight: 3,
paddingBottom: 3,
paddingLeft: 0,
position: "absolute",
backgroundColor: "#FDC72F",

},

"top": {
justifyContent: "center",
alignItems: "center",

},
"bottom": {

justifyContent: "center",
alignItems: "center",

},
"right": {

width: 50,
justifyContent: "space-around",
alignItems: "center",
},

"left": {

width: 50,
justifyContent: "space-around",
alignItems: "center",
},

"yellow": {
color: "#FDC72F",
fontWeight: "900",
},

"white": {
color: "white",
fontWeight: "900",
},

"margginBox": {

"position": "absolute",
"top": 100,
"paddingLeft": 7,
"paddingRight": 7,

},

"borderBox": {

flex: 1,
justifyContent: "space-between",
flexDirection: "row",
}

})

var demo = React.createClass({
render: function() {

return (

<View style={[BoxStyle.margginBox]} ref="lab1">

<View style={[BoxStyle.box,BoxStyle.height400,BoxStyle.width400]}>

<View style={[BoxStyle.top,BoxStyle.height50,BoxStyle.bgred]}>

<Text style = {BoxStyle.yellow}>上</Text>

</View>

<View style={[BoxStyle.borderBox]}>

<View style={[BoxStyle.left,BoxStyle.bgred]}>
<Text style = {BoxStyle.yellow}>左</Text>
</View>

<View style={[BoxStyle.right,BoxStyle.bgred]}>
<Text style = {BoxStyle.yellow}>右</Text>
</View>

</View>

<View style = {[BoxStyle.bottom,BoxStyle.height50,BoxStyle.bgred]}>

<Text style = {BoxStyle.yellow}>下</Text>
</View>

<View style={[BoxStyle.label]}>
<Text style = {BoxStyle.white}>Tip:</Text>
</View>

</View>

</View>

)

}

})

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