1.FlexBox布局19-07-23

import Constants from 'expo-constants';
import React from 'react';
import { SectionList, Image, StyleSheet, Text, View } from 'react-native';

export default class ExpoConfigView extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        {/*<View style={styles.innerViewStyle}>*/}
        {/*</View>*/}
        {/*<View style={styles.innerViewStyle2}>*/}
        {/*</View>*/}
        <Text style={{backgroundColor: 'yellow', height: 30}}>1</Text>
        <Text style={{backgroundColor: 'gray', height: 40}}>2</Text>
        <Text style={{backgroundColor: 'blue', height: 50}}>3</Text>
        <Text style={{backgroundColor: 'green', height: 60}}>4</Text>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  container: {
    // flex: 1,
    backgroundColor: 'purple',
    // backgroundColor:'red',
    // width: 300,
    // height: 100,
    //改变主轴的方向  左-->右
     flexDirection: 'row',
    //改变主轴的方向  左-->右
    // flexDirection: 'row-reverse',
    //改变主轴的方向  上-->下
    //   flexDirection: 'column',
    //改变主轴的方向  下-->上
    //  flexDirection: 'column-reverse'
    //上边距
    marginTop: 25,
    //设置主轴对齐方式 左边对齐
    // justifyContent: 'flex'
    //设置主轴对齐方式 右边对齐
    // justifyContent: 'flex-end'
    //均匀分布两端对齐
    // justifyContent: 'space-between',
    //均匀分布中间对齐
    justifyContent: 'space-around',
    //侧轴对齐方式
    //顶部对齐
    // alignItems: 'flex-start',
    //低部对齐
    // alignItems: 'flex-end',
    //居中对齐
    // alignItems: 'center'
  },
  innerViewStyle: {
    backgroundColor:'green',
    width: 100
  },
  innerViewStyle2: {
    backgroundColor: 'yellow',
    width:100
  }
});

import Constants from 'expo-constants';
import React from 'react';
import { SectionList, Image, StyleSheet, Text, View } from 'react-native';

export default class ExpoConfigView extends React.Component {
  render() {
   return (
      <View style={styles.container}>
        <Text style={{backgroundColor: 'yellow', width:80}}>1</Text>
        <Text style={{backgroundColor: 'gray', width:90}}>2</Text>
        <Text style={{backgroundColor: 'blue', width:100}}>3</Text>
        <Text style={{backgroundColor: 'green', width:110}}>4</Text>
      </View>
    );
  }
 }
const styles = StyleSheet.create({
  container: {
    //flex为1的时候默认沾满整个屏幕
    // flex: 1,
    backgroundColor: 'purple',
    marginTop: 25,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    //换行属性
    //默认不换行
    // flexWrap:'nowrap'
    //换行
    flexWrap: 'wrap'
  },
});

import Constants from 'expo-constants';
import React from 'react';
import { SectionList, Image, StyleSheet, Text, View } from 'react-native';

export default class ExpoConfigView extends React.Component {
  render() {
   return (
      <View style={styles.container}>
        <Text style={{backgroundColor: 'yellow',flex: 1}}>1</Text>
        <Text style={{backgroundColor: 'gray',flex:2}}>2</Text>
        <Text style={{backgroundColor: 'blue',flex:3}}>3</Text>
        <Text style={{backgroundColor: 'green'}}>4</Text>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  container: {
    //flex为1的时候默认沾满整个屏幕,
    //如Text中灰色的长度就是，[（全长 - 绿色长度(默认值)）/ (1+2+3)] * 2
    // flex: 1,
    backgroundColor: 'purple',
    marginTop: 25,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    //换行属性
    //默认不换行
    // flexWrap:'nowrap'
    //换行
    flexWrap: 'wrap'
  },
});

import Constants from 'expo-constants';
import React from 'react';
import { SectionList, Image, StyleSheet, Text, View } from 'react-native';

export default class ExpoConfigView extends React.Component {
  render() {

    return (
      <View style={styles.container}>
        <Text style={{backgroundColor: 'yellow',flex: 1, height: 60, alignSelf:'flex-start'}}>1</Text>
        <Text style={{backgroundColor: 'gray',flex:2, height: 70, alignSelf:'flex-end'}}>2</Text>
        <Text style={{backgroundColor: 'blue',flex:3, height: 80}}>3</Text>
        <Text style={{backgroundColor: 'green',flex:1, height: 90}}>4</Text>
      </View>
    );
  }
 }

const styles = StyleSheet.create({
  container: {
    //flex为1的时候默认沾满整个屏幕,
    //如Text中灰色的长度就是，[（全长 - 绿色长度(默认值)）/ (1+2+3)] * 2
    // flex: 1,
    backgroundColor: 'purple',
    marginTop: 25,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
    //换行属性
    //默认不换行
    // flexWrap:'nowrap'
    //换行
    // flexWrap: 'wrap'

    //单个对齐方式，可以覆盖alignItems
    //顶部对齐
    // alignSelf:'flex-start'
    //底部对齐
    // alignSelf:'flex-end'
  },
});

获取屏幕宽高

import React from 'react';
import { SectionList, Image, StyleSheet, Text, View } from 'react-native';
var Dimensions = require ('Dimensions') ;

export default class SettingsScreen extends React.Component {

  render() {

    return (
      <View style={styles.container}>
        <Text>屏幕的宽是：{Dimensions.get('window').width}</Text>
        <Text>屏幕的高是：{Dimensions.get('window').height}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'purple',
    marginTop: 25,
    flexDirection: 'row',
    justifyContent: 'flex-start',
    alignItems: 'center',
  },
});