在组件样式中使用flex可以使其在可利用的空间中动态地扩张或收缩。一般而言我们会使用flex:1来指定某个组件扩张以撑满所有剩余的空间。如果有多个并列的子组件使用了flex:1，则这些子组件会平分父容器中剩余的空间。如果这些并列的子组件的flex值不一样，则谁的值更大，谁占据剩余空间的比例就更大（即占据剩余空间的比等于并列组件间flex值的比）。
组件能够撑满剩余空间的前提是其父容器的尺寸不为零。如果父容器既没有固定的width和height，也没有设定flex，则父容器的尺寸为零。其子组件如果使用了flex，也是无法显示的。
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class LotsOfStyles extends Component { render() { return ( <View style={styles.sizemake}> <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', }, sizemake:{ top:100, left:200, width:200, height:300, backgroundColor:'green', }, }); class TestFlex extends Component{ render(){ return( <View style={styles.sizemake}> <View style={{flex:1,backgroundColor:'green'}}/> <View style={{flex:2,backgroundColor:'black'}}/> <View style={{flex:3,backgroundColor:'red'}}/> </View> ); } }; class TestFlex2 extends Component{ render(){ return( <View style={{flex: 1}}> <View style={{flex:1,backgroundColor:'green'}}/> <View style={{flex:2,backgroundColor:'black'}}/> <View style={{flex:3,backgroundColor:'red'}}/> </View> ); } }; AppRegistry.registerComponent('LotsOfGreetings', () => TestFlex); //AppRegistry.registerComponent('LotsOfGreetings', () => TestFlex2); top,left用来等同于原生开发的x,y，如果想要知道更多的属性，可以写成x,然后在Xcode里面运行，在虚拟机上面能看到各种属性，然后根据字义猜个大致
