React Native－3.React Native中的主要布局属性介绍和练习

我们搞出些事情

我们上两节学习了CSS的伸缩属性标签的作用和效果实现，这一节我们顺势学习一下在React Native 中是使用flexbox

React Native 中的主要flexbox属性介绍

alignItems

alignSelf

flex

flexDirection

flexWrap

justifycontent

Just Do it

1、alignItems

该属性的用法和欠扁的align-items，区别在于写法使用驼峰拼写法，语法：

alignItems : flex-start | flex-end | center | strech

注： 因为前两张对这些属性和参数的功能用法都有详细的解释，本节不再做展示

2、alignSelf

该属性的用法同赏遍的

align-self

，区别在于它需要使用驼峰拼写法，语法：

alignSelf: auto | flex-start | flex-end | center | stretch

3、flex

该属性的用法同上一章节的flex，语法：

felx : number

4、flexDirection

该属性的用法同上面的

flex-direction

,区别在于React Native 中默认的是column，其语法为：

flexDirection: row | cloumn

5、flexWrap

该属性的用法同上面的

flex-wrap

，区别在于需要使用驼峰拼写法，语法：

flexWrap: wrap | nowrap

6、justifyContent

该属性的用法同上边的

justify-content

，区别在于需要使用驼峰拼写法，语法：

justifyContent: flex-start | flex-end | center | space-around | space-between

光说不练假把式

我们来用学习CSS的经典模型：盒子模型，来联系我们学习的属性

实现效果：



ps: 自行忽略信号和时间。。。。

代码：

'use strict';

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

var wxsPrj = React.createClass({
render: function() {
return (
<View style = {styles.boxRect}>
<View style = {styles.top}>
<Text style = {styles.myTextColor}>
top
</Text>
</View>
<View style = {styles.centerView}>
<View style = {[styles.left,styles.height100,styles.width50]}>
<Text style = {styles.myTextColor}>
left
</Text>
</View>
<View style = {[styles.right,styles.height100,styles.width50]}>
<Text style={styles.myTextColor}>
right
</Text>
</View>
</View>
<View style = {styles.bottom}>
<Text style = {styles.myTextColor}>
bottom
</Text>
</View>
</View>
);
}
});

var styles = StyleSheet.create({
myTextColor: {
height:20,
width:50,
alignSelf:'center',
textAlign:'center',
color: '#ffffff',
},
boxRect: {
backgroundColor: '#555555',
flexDirection:'column',
flexWrap:'nowrap',
justifyContent:'flex-start',
width:200,
height:200,
},
top: {
backgroundColor: '#666666',
justifyContent: 'center',
flexDirection:'row',
height:50,
},
bottom: {
backgroundColor: '#666666',
justifyContent: 'center',
height:50,
},
right: {
backgroundColor: '#666666',
justifyContent: 'center',
flexDirection:'row',

},
left: {
backgroundColor: '#666666',
justifyContent: 'center',
flexDirection:'row',
},
centerView: {
justifyContent:'space-between',
flexDirection:'row',
},
height50: {
height: 50,
},
width50: {
width: 50,
},
height100:{
height:100,
}

});

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

运行后的效果：

最后总是得说点什么装一下。。。

总结一下CSS中标签的书写格式和React Native中标签的书写格式的区别：

- CSS以分号（；）结尾 ，RN 以逗号（，）结尾；

- CSS中key，value都不加引号，RN中属于JavaScript对象 ，如果value为字符串，需要用引号引起来，并且key值中间不能出现“－“，一定要转为驼峰命名方式。

- CSS中，value值为数字时，需要带单位，RN中则不用带。