/**
* Create by bamboo on 2018-04-13
* Page Layout
*/
import
React
, {
Component
}
from
'react'
;
import
{
StyleSheet
,
Text
,
View
,
}
from
'react-native'
;
export
defaultclassApp extendsComponent {
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',
},
});
结果如下：
