/**
* 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',
},
});
结果如下：
