React Native-4.React Native布局属性练习之flexBox模型实战
废话不多说,学以致用! 使用react native init 创建的项目中,在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
Box
|