React native学习第四章：宽高（Flex）

弹性（Flex）宽高

           在组件样式中使用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里面运行，在虚拟机上面能看到各种属性，然后根据字义猜个大致