/**
* Create by bamboo on 2018-04-13
* 页面布局
*/
import
React,{
Component }
from
'react';
import {
StyleSheet,
Text,212);">
View,212);">
}
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
>
);
}
const
styles =
StyleSheet.
create({
body:{
},212);">
row:{
flexDirection:
'row',212);">
height:
50,212);">
r1:{
flex:
1,212);">
backgroundColor:
'#33ccff',212);">
r2:{
flex:
2,212);">
backgroundColor:
'#FF34B3',212);">
column:{
flexDirection:
'column',
c1:{
c2:{
});
结果如下：
