React Native 之 Flex

組件的高度，寬度決定了在屏幕上的尺寸。React-Native中尺寸都是無單位的，表示的是與設備像素密度無關的邏輯像素點。

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class TestSize extends Component { render() { return ( <View> <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} /> <View style={{width: 100, height: 100, backgroundColor: 'skyblue'}} /> <View style={{width: 150, height: 150, backgroundColor: 'steelblue'}} /> </View> ); } }; // 注冊應用(registerComponent)后才能正確渲染 // 注意：只把應用作為一個整體注冊一次，而不是每個組件/模塊都注冊 AppRegistry.registerComponent('TestSize', () =>TestSize);

// 設置了具體的寬、高，那么在任何設備上都是同樣的尺寸，不存在適配這么一說。

對應效果圖如下：


Flex 

在組件樣式中使用Flex 可以使其可以再可利用的空間內動態擴張或收縮，經常會看到flex:1 指定某個控件擴展以充滿所有剩余空間。如果多個並列的子組件都是flex：1，這些子組件平分父容器中剩余空間
，若這些並列子組件flex都不一樣，那么他們會按照比例充滿父容器剩余空間（例如3個子組件，flex分別是 2，4，5，那么分別占用父容器剩余空間的2/11, 4/11, 5/11）
前提：子組件能夠充滿父容器剩余空間必須父容器的尺寸不為 0 ，如果父容器既沒有指定width、height，同時也沒有設定flex：1,那么子組件將不會顯示（即使子組件設置了flex）。
 父組件默認設置flex：1（默認充滿整個剩余空間）

import React, { Component } from 'react'; import { AppRegistry, View } from 'react-native'; class TestSize extends Component { render() { return (

<View style={{flex: 1}}> <View style={{flex: 1, backgroundColor: 'powderblue'}} /> <View style={{flex: 2, backgroundColor: 'skyblue'}} /> <View style={{flex: 3, backgroundColor: 'steelblue'}} /> </View>

 ); } }; 

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

如下圖：


如果設置父容器寬+高（例如width：50，height：200），如下圖