react-native 列式布局行式布局

最新推荐文章于 2024-07-04 21:26:38 发布

Hi竹子

最新推荐文章于 2024-07-04 21:26:38 发布

阅读量1.7k

点赞数

分类专栏： React Native

竹子原创，转载请附链接和署名

本文链接：https://blog.csdn.net/u010411264/article/details/79974829

版权

React Native 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

 
  /** 
 
   * 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', 
 
   }, 
 
   });