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定义一个控件的样式，例如：

 <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />

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

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

class IndexPage extends Component {
   render() {
      return (
        <View>
          <Text style={styles.red}>just red</Text>
          <Text style={styles.bigblue}>just bigblue</Text>
          <Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
          <Text style={[styles.red, styles.bigblue]}>red, then bigblue</Text>
        </View>
      );
    }
}

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://垂直，从下往上布局
             <View style={{flex: 0, flexDirection: 'row'}}>
               <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
               <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
               <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
             </View>
           );
         }
}

// 注意，这里用引号括起来的'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：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
                  <View style={{
                    flex: 1,
                    flexDirection: 'column',
                    justifyContent: 'flex-start',
                  }}>
                    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                    <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
                    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
                  </View>
           );
         }
}

// 注意，这里用引号括起来的'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，将占满整个容器的高度。
                       <View style={{
                         flex: 1,
                         flexDirection: 'column',
                         justifyContent: 'center',
                         alignItems: 'flex-start',
                       }}>
                         <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
                         <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
                         <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
                       </View>
           );
         }
}

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

flex-start flex-end center stretch