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.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',right: {
    backgroundColor: '#666666',left: {
    backgroundColor: '#666666',centerView: {
    justifyContent:'space-between',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中则不用带。