react-native 列式布局 行式布局

版权声明:竹子原创,未经允许不得转载 https://blog.csdn.net/u010411264/article/details/79974829
/**
* 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',
},

});

结果如下:



阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页