ReactNative--Flexbox布局

http://www.runoob.com/css3/css3-flexbox.html

rn和css3的语法有一些不同，比如命名的时候rn中间不能有横岗，然后属性用逗号分隔

把这篇文章看看，然后对照练习一遍

flex属性就是这个作用

下面是那个css3的学习笔记

CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式

反正就是一种适配方式

 

下面是一个完整的代码，就是用一下flexbox

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View
} from 'react-native';

var Flexbox = React.createClass({
  render:function () {
    return (
      <View style={styles.container}>

        <View style={styles.child1}>
        </View>

        <View style={styles.child2}>
        </View>

      </View>
    );
  }
});

// var styles = StyleSheet.create({
//   container:{
//     margin:30,
//     width:300,
//     height:500,
//     backgroundColor:"yellow",
//     //默认主轴方向是column
//     //设置为横向排列
//     flexDirection:"row",
//     //主轴方向
//     justifyContent:"center",
//     //交叉轴
//     alignItems:"center",
//   },
//   child1:{
//     width:100,
//     height:100,
//     backgroundColor:"green",
//   },
//   child2:{
//     width:100,
//     height:100,
//     backgroundColor:"blue",
//   }
// });

/*
  flex
  可以给组件指定flex，flex的值是数字，flex：1表示，组件可以撑满父组件所有的剩余空间
  同时存在多个并列的子组件，flex：1，均分
  如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大
  （即占据剩余空间的比等于并列组件间flex值的比）
*/
var styles = StyleSheet.create({
  container:{
    margin:30,
    flex:1,
    backgroundColor:"cyan"
  },
  child1:{
    flex:1,
    backgroundColor:"green",
  },
  child2:{
    flex:1,
    backgroundColor:"yellow",
  },

});

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