react-native 列式布局行式布局

/**
 * Create by bamboo on 2018-04-13
 * 页面布局
 */

import React, { Component } from 'react';

import {
 StyleSheet,
 Text,
 View,
} from 'react-native';



export default class App extends Component {
 constructor(props) {
 super(props);
 this.state = {
 };
 }

 render() {
 return (
 <View style={styles.body}>
 <Text>列式布局</Text>
 <View style={styles.row}>
 <View style={styles.r1}></View>
 <View style={styles.r2}></View>
 </View>

 <Text>行式布局</Text>
 <View style={styles.column}>
 <View style={styles.c1}></View>
 <View style={styles.c2}></View>
 </View>
 </View>
 );
 }
}


const styles = StyleSheet.create({
 body:{
 },
 row:{
 flexDirection:'row',
 height:50,
 },
 r1:{
 flex:1,
 backgroundColor:'#33ccff',
 },
 r2:{
 flex:2,
 backgroundColor:'#FF34B3',
 },
 column:{
 flexDirection:'column',
 height:50,
 },

 c1:{
 flex:1,
 backgroundColor:'#33ccff',
 },
 c2:{
 flex:2,
 backgroundColor:'#FF34B3',
 },

});
结果如下：