react-native 列式布局 行式布局
发布时间：2020-12-15 06:29:33 所属栏目：百科 来源：网络整理
导读：/** * 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 ) { su
|
/**
* 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:{
});
结果如下： （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |