ReactNative学习——Flexbox布局

关于FlexBox的资料可以参阅这篇博文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

ctrl+M可以呼出调试工具，开启热更新开关后，以后只要js代码有修改，保存下文件，模拟器上自动就会变化过来

只示例了官方提供的那几个，其他更多样式属性可以参阅官方文档：http://reactnative.cn/docs/0.47/layout-props.html

样式的使用

在RN里面，可以直接使用style定义一个控件的样式，例如：

如果某个样式多个地方需要使用，可以使用StyleSheet对样式进行抽取创建

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

class IndexPage extends Component {
   render() {
      return (
        
          just red
          just bigblue
          bigblue, then red
          red, then bigblue
        
      );
    }
}

const styles = StyleSheet.create({
  bigblue: {
    color: 'blue',
    fontWeight: 'bold',
    fontSize: 30,
  },
  red: {
    color: 'red',
  },
});

// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);

1、flexDirection（相当于horizontal和vertical效果）

有4个属性值：
    row：水平从左往右布局
    row-reverse：//水平从右往左布局
    column://垂直，从上往下布局
    column-reverse://垂直，从下往上布局

使用代码：

import React, {Component} from "react";
import {AppRegistry,View } from "react-native";

class IndexPage extends Component {
   render() {
        return (
             //flexDirection的值有：
             //row：水平从左往右布局
             //row-reverse：//水平从右往左布局
             //column://垂直，从上往下布局
             //column-reverse://垂直，从下往上布局
             
               
               
               
             
           );
         }
}

// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);

row

row-reverse

column

column-reverse

2、Justify Content（相当于gravity）

//flex-start（默认值）：左对齐
//flex-end：右对齐
//center： 居中
//space-between：两端对齐，项目之间的间隔都相等。
//space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

使用代码：

import React, {Component} from "react";
import {AppRegistry,View } from "react-native";

class IndexPage extends Component {
   render() {
        return (
                   //flex-start（默认值）：左对齐
                   //flex-end：右对齐
                   //center： 居中
                   //space-between：两端对齐，项目之间的间隔都相等。
                   //space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
                  
                    
                    
                    
                  
           );
         }
}

// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);

flex-start

flex-end

center

space-between

space-around

3、alignItems

//flex-start：交叉轴的起点对齐。
//flex-end：交叉轴的终点对齐。
//center：交叉轴的中点对齐。
//stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

使用代码：

import React, {Component} from "react";
import {AppRegistry,View } from "react-native";

class IndexPage extends Component {
   render() {
        return (
                        //flex-start：交叉轴的起点对齐。
                        //flex-end：交叉轴的终点对齐。
                        //center：交叉轴的中点对齐。
                        //stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
                       
                         
                         
                         
                       
           );
         }
}

// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致
AppRegistry.registerComponent('HelloRN', ()=>IndexPage);

flex-start

flex-end

center

stretch