React Native FlexBox

FlexBox 是React Native布局的一种算法，目的是为了适配不同尺寸的屏幕而设计的。

使用时最关键的就是flex关键字的用法。

flex用于修饰当前View在父视图中的占比。

占比如何计算：(flex 为浮点数)

　　1、当flex <= 0时 flex是无效的。此时视图不会被显示出来

　　2、当flex > 0 时：

　　　　a、当有多个同一层级的视图时 占比为 当前视图占flex/(所有同一层级flex总和)

　　　　b、当当前视图的父视图只有一个子View时，即当前视图占满了父视图。

　　　　c、如果当前视图有子视图的话，子视图的分布是基于当前视图的显示区域的,即：如果当前视图占父视图的0.3，那么当前视图子视图如果此时的

flex为0.5的话，这个属于当前视图的子视图在当前视图的父视图中占比为0.3*0.5=0.15

import React, { Component } from 'react';

import {

AppRegistry,

StyleSheet,

Text,

View

} from 'react-native';

export default class DimensionTest extends Component {

render() {

return (

<View style={{flex:0.1}}>

<View style={{flex:0.5,flexDirection:'column'}}>

<View style={{flex:3,backgroundColor:'red'}}></View>

<View style={{flex:2,backgroundColor:'blue'}}></View>

<View style={{flex:3,backgroundColor:'green'}}></View>

</View>

<View style={{flex:5,flexDirection:'row'}}>

<View style={{flex:3,backgroundColor:'red'}}></View>

<View style={{flex:2,backgroundColor:'blue'}}></View>

<View style={{flex:3,backgroundColor:'green'}}></View>

</View>

</View>

);

}

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