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中则不用带。