React Native FlexBox

FlexBox 是React Native佈局的一種算法，目的是爲了適配不一樣尺寸的屏幕而設計的。

使用時最關鍵的就是flex關鍵字的用法。

flex用於修飾當前View在父視圖中的佔比。

佔好比何計算：(flex 爲浮點數)

　　一、當flex <= 0時 flex是無效的。此時視圖不會被顯示出來

　　二、當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);