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',
},
});
结果如下：
以上是 react-native 列式布局 行式布局 的全部内容， 来源链接： utcz.com/z/381964.html
