设为首页收藏本站

react native【免费】VIP视频教程 rn开发者交流论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 421|回复: 8

[课堂源码] Boxapp类似html写法【react native 实战开发视频教程】

[复制链接]

401

主题

762

帖子

6672

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
6672
发表于 2016-6-17 16:54:07 | 显示全部楼层 |阅读模式
Boxapp类似html写法【react native 实战开发视频教程】
  1. /**
  2. * Sample React Native App
  3. * https://github.com/facebook/react-native
  4. */
  5. 'use strict';
  6. import React, {
  7.   AppRegistry,
  8.   Component,
  9.   StyleSheet,
  10.   Text,
  11.   View
  12. } from 'react-native';

  13. class DongFang extends Component {
  14.   render() {
  15.     return (
  16.         <View style={[BoxStyles.margginBox]}  ref="lab1">
  17.           <View style={[BoxStyles.box,BoxStyles.height400,BoxStyles.width400]}>
  18.             <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgred]}>
  19.               <Text style={BoxStyles.yellow}>top</Text></View>
  20.             <View style={[BoxStyles.borderBox]}>
  21.               <View style={[BoxStyles.left,BoxStyles.bgred]} >
  22.                 <Text style={BoxStyles.yellow}>left</Text></View>
  23.               <View style={[BoxStyles.box,BoxStyles.height300]}>
  24.                 <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bggreen]}>
  25.                   <Text style={BoxStyles.yellow}>top</Text></View>
  26.                 <View style={[BoxStyles.paddingBox]}>
  27.                   <View style={[BoxStyles.left,BoxStyles.bggreen]} >
  28.                     <Text style={BoxStyles.yellow}>left</Text></View>
  29.                   <View style={[BoxStyles.box,BoxStyles.height200]}>
  30.                     <View style={[BoxStyles.top,BoxStyles.height50,BoxStyles.bgyellow]}>
  31.                       <Text style={BoxStyles.yellow}>top</Text></View>
  32.                     <View style={[BoxStyles.elementBox]}>
  33.                       <View style={[BoxStyles.left,BoxStyles.bgyellow]} >
  34.                         <Text style={BoxStyles.yellow}>left</Text></View>
  35.                       <View style={[BoxStyles.box,BoxStyles.height100]}>
  36.                         <View  style={[BoxStyles.label]}>
  37.                           <Text style={BoxStyles.white}>element</Text></View>
  38.                         <View style={[BoxStyles.widthdashed]} ></View>
  39.                         <View style={[BoxStyles.heightdashed]} ></View>
  40.                         <View style={[BoxStyles.measureBox]} >
  41.                           <View style={[BoxStyles.right]}>
  42.                             <Text style={[BoxStyles.yellow]}>height</Text></View>
  43.                         </View>
  44.                         <View style={[BoxStyles.bottom,BoxStyles.height50]}>
  45.                           <Text style={BoxStyles.yellow}>width</Text></View>
  46.                       </View>
  47.                       <View style={[BoxStyles.right,BoxStyles.bgyellow]}><Text style={BoxStyles.yellow}>right</Text></View>
  48.                     </View>
  49.                     <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgyellow]}>
  50.                       <Text style={BoxStyles.yellow}>bottom</Text></View>
  51.                     <View style={[BoxStyles.label]}>
  52.                       <Text style={BoxStyles.white}>padding</Text></View>
  53.                   </View>
  54.                   <View style={[BoxStyles.right,BoxStyles.bggreen]}><Text style={BoxStyles.yellow}>right</Text></View>
  55.                 </View>
  56.                 <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bggreen]}>
  57.                   <Text style={BoxStyles.yellow}>bottom</Text></View>
  58.                 <View style={[BoxStyles.label]}><Text style={BoxStyles.white}>border</Text></View>
  59.               </View>
  60.               <View style={[BoxStyles.right,BoxStyles.bgred]}>
  61.                 <Text style={BoxStyles.yellow}>right</Text></View>
  62.             </View>
  63.             <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles.bgred]}>
  64.               <Text style={BoxStyles.yellow}>bottom</Text></View>
  65.             <View style={[BoxStyles.label]} ><Text style={BoxStyles.white}>margin</Text></View>
  66.           </View>
  67.         </View>
  68.     );
  69.   }
  70. }

  71. const BoxStyles = StyleSheet.create({
  72.   height50:{
  73.     height: 50,
  74.   },
  75.   height400:{
  76.     height: 400,
  77.   },
  78.   height300:{
  79.     height: 300,
  80.   },
  81.   height200:{
  82.     height: 200,
  83.   },
  84.   height100:{
  85.     height: 100,
  86.   },
  87.   width400:{
  88.     width: 400,
  89.   },
  90.   width300:{
  91.     width: 300,
  92.   },
  93.   width200:{
  94.     width: 200,
  95.   },
  96.   width100:{
  97.     width: 100,
  98.   },
  99.   bgred: {
  100.     backgroundColor:'#6AC5AC',
  101.   },
  102.   bggreen: {
  103.     backgroundColor: '#414142',
  104.   },
  105.   bgyellow: {
  106.     backgroundColor: '#D64078',
  107.   },
  108.   box: {
  109.     flexDirection: 'column',
  110.     flex: 1,
  111.     position: 'relative',
  112.   },
  113.   label: {
  114.     top: 0,
  115.     left: 0,
  116.     paddingTop: 0,
  117.     paddingRight: 3,
  118.     paddingBottom: 3,
  119.     paddingLeft: 0,
  120.     position: 'absolute',
  121.     backgroundColor: '#FDC72F',
  122.   },
  123.   top: {
  124.     justifyContent: 'center',
  125.     alignItems: 'center',
  126.   },
  127.   bottom: {
  128.     justifyContent: 'center',
  129.     alignItems: 'center',
  130.   },
  131.   right: {
  132.     width: 50,
  133.     justifyContent: 'space-around',
  134.     alignItems: 'center',
  135.   },
  136.   left: {
  137.     width: 50,
  138.     justifyContent: 'space-around',
  139.     alignItems: 'center',
  140.   },
  141.   heightdashed: {
  142.     bottom: 0,
  143.     top: 0,
  144.     right: 20,
  145.     borderLeftWidth: 1,
  146.     position: 'absolute',
  147.     borderLeftColor: '#FDC72F',
  148.   },
  149.   widthdashed: {
  150.     bottom: 25,
  151.     left: 0,
  152.     right: 0,
  153.     borderTopWidth: 1,
  154.     position: 'absolute',
  155.     borderTopColor: '#FDC72F',
  156.   },
  157.   yellow: {
  158.     color: '#FDC72F',
  159.     fontWeight:'900',
  160.   },
  161.   white: {
  162.     color: 'white',
  163.     fontWeight:'900',
  164.   },
  165.   margginBox:{
  166.     position: 'absolute',
  167.     top: 100,
  168.     paddingLeft:7,
  169.     paddingRight:7,
  170.   },
  171.   borderBox:{
  172.     flex: 1,
  173.     justifyContent: 'space-between',
  174.     flexDirection: 'row',
  175.   },
  176.   paddingBox:{
  177.     flex: 1,
  178.     justifyContent: 'space-between',
  179.     flexDirection: 'row',
  180.   },
  181.   elementBox:{
  182.     flex: 1,
  183.     justifyContent: 'space-between',
  184.     flexDirection: 'row',
  185.   },
  186.   measureBox:{
  187.     flex: 1,
  188.     flexDirection: 'row',
  189.     justifyContent: 'flex-end',
  190.     alignItems:'flex-end',
  191.   },
  192.   container: {
  193.     flex: 1,
  194.     justifyContent: 'center',
  195.     alignItems: 'center',
  196.     backgroundColor: '#F5FCFF',
  197.   },
  198.   welcome: {
  199.     fontSize: 20,
  200.     textAlign: 'center',
  201.     margin: 10,
  202.   },
  203.   instructions: {
  204.     textAlign: 'center',
  205.     color: '#333333',
  206.     marginBottom: 5,
  207.   },
  208. });

  209. AppRegistry.registerComponent('DongFang', () => DongFang);
复制代码




react native vip论坛免费发布【手把手教react native实战开发】视频教程,立志于打造全互联网最全面最详细最易懂的React Native
开发视频教程,Facebook已经在多项产品中使用了React Native,并且将持续地投入建设,让我们引领react native开发的潮流!
回复

使用道具 举报

0

主题

55

帖子

144

积分

注册会员

Rank: 2

积分
144
发表于 2016-7-15 08:56:09 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

69

帖子

178

积分

注册会员

Rank: 2

积分
178
发表于 2016-7-15 14:51:04 | 显示全部楼层
懂了一点.......
回复

使用道具 举报

0

主题

26

帖子

54

积分

注册会员

Rank: 2

积分
54
发表于 2016-8-7 11:54:19 | 显示全部楼层
支持学习
回复

使用道具 举报

0

主题

20

帖子

44

积分

新手上路

Rank: 1

积分
44
发表于 2016-8-13 14:54:03 | 显示全部楼层

学习学习
回复

使用道具 举报

0

主题

52

帖子

106

积分

注册会员

Rank: 2

积分
106
发表于 2016-8-26 12:08:32 | 显示全部楼层
学习学习
回复

使用道具 举报

0

主题

82

帖子

186

积分

注册会员

Rank: 2

积分
186
发表于 2016-9-2 16:32:44 | 显示全部楼层
要想人前显贵,必须人后受罪,加油!
回复 支持 反对

使用道具 举报

0

主题

54

帖子

128

积分

注册会员

Rank: 2

积分
128
发表于 2016-10-4 19:10:37 | 显示全部楼层
好好学习,天天向上!!!
回复 支持 反对

使用道具 举报

0

主题

24

帖子

50

积分

注册会员

Rank: 2

积分
50
发表于 2017-9-10 12:18:52 | 显示全部楼层
学习了,真好
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|ReactNative Inc.    

GMT+8, 2018-1-23 00:07 , Processed in 0.166672 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表