React Native 第二天

4、FlexBox/弹性布局

Flex用于对界面进行适配的一个属性,相当于Android中的LinearLayout的weight属性,可以把屏幕分成几份供控件去显示:

 import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <View style={{flex: 5, backgroundColor: 'green'}}                ></View>                <View style={{flex: 1, backgroundColor: 'blue'}}                ></View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,        backgroundColor: 'red'    }});

上面的这段代码就是把屏幕在竖直方向上分成6份,上面占5份,下面占1份.

5、FlexDirection

FlexDirection是用来改变主轴和侧轴对齐方向的一个属性,默认主轴是竖直方向,侧轴是水平方向.属性的值有row(水平方向),row-reverse(水平方向翻转),column(竖直方向),column-reverse(竖直方向翻转)

import React, {Component} from 'react';import {    AppRegistry,    StyleSheet,    Text,    View} from 'react-native';export default class Main extends Component {    render() {        return (            <View style={styles.container}>                <View style={styles.viewStyle}><Text style={styles.textStyle}>{'1'}</Text></View>                <View style={styles.viewStyle}><Text style={styles.textStyle}>{'2'}</Text></View>                <View style={styles.viewStyle}><Text style={styles.textStyle}>{'3'}</Text></View>                <View style={styles.viewStyle}><Text style={styles.textStyle}>{'4'}</Text></View>            </View>        );    }}const styles = StyleSheet.create({    container: {        flex: 1,    },    viewStyle: {        width: 100,        height: 100,        backgroundColor: 'red',        margin: 10    },    textStyle: {        color: '#fff',        fontSize: 20    }});

上面这段代码就是屏幕上会显示竖直排列的4个色块,默认的对齐方式是按照主轴竖直方向排列.但在实际开发中有时候需要让它水平排列,只需要将flexDirection的方向变成横向的

const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row' //主轴方向变成横向    },    viewStyle: {        width: 100,        height: 100,        backgroundColor: 'red',        margin: 10    },    textStyle: {        color: '#fff',        fontSize: 20    }});

6、FlexWrap

flexwrap是用来设置超出父容器是否换行(wrap nowrap)

const styles = StyleSheet.create({    container: {        flex: 1,        flexDirection: 'row', //主轴方向变成横向        flexWrap:'wrap' //设置换行    },    viewStyle: {        width: 100,        height: 100,        backgroundColor: 'red',        margin: 10    },    textStyle: {        color: '#fff',        fontSize: 20    }});