设为首页收藏本站

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

 找回密码
 立即注册

QQ登录

只需一步,快速开始

查看: 864|回复: 12

[课堂源码] Boxapp ReactJs写法【手把手教react native视频开发】

[复制链接]

401

主题

763

帖子

7142

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
7142
发表于 2016-6-17 16:57:16 | 显示全部楼层 |阅读模式
Boxapp ReactJs写法【手把手教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 Box extends Component{
  14.   render(){
  15.   return (
  16.       <View style={[BoxStyles.box,BoxStyles[this.props.width],BoxStyles[this.props.height]]}>
  17.         <View  style={[BoxStyles.top,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>top</Text></View>
  18.         <View style={[BoxStyles[this.props.childName]]}>
  19.           <View style={[BoxStyles.left,BoxStyles[this.props.classBg]]}><Text>left</Text></View>
  20.           {this.props.children}
  21.           <View style={[BoxStyles.right,BoxStyles[this.props.classBg]]}><Text>right</Text></View>
  22.         </View>
  23.         <View style={[BoxStyles.bottom,BoxStyles.height50,BoxStyles[this.props.classBg]]}><Text>bottom</Text></View>
  24.         <View style={[BoxStyles.label]}><Text>{this.props.boxName}</Text></View>
  25.       </View>
  26.   )
  27. }
  28. }

  29. class MargginBox extends Component{
  30.   render(){
  31.   return (
  32.       <View style={[BoxStyles.margginBox]}>
  33.         <Box  childName="borderBox"  height="height400" width="width400" boxName="margin" classBg="bgred">{this.props.children}</Box>
  34.       </View>
  35.   )
  36. }

  37. }


  38. class BorderBox extends Component{
  39.   render(){
  40.   return (
  41.       <Box childName="paddingBox"  height="height300" width="width300" boxName="border" classBg="bggreen" >{this.props.children}</Box>
  42.   )
  43. }

  44. }


  45. class PaddingBox extends Component{
  46.   render(){
  47.   return (
  48.       <Box childName="elementBox"  height="height200" width="width200" boxName="padding" classBg="bgyellow" >{this.props.children}</Box>
  49.   )
  50. }
  51. }


  52. class ElementBox extends Component{
  53.   render(){
  54.   return (
  55.       <View style={[BoxStyles.box,BoxStyles.height100]}>
  56.         <View style={[BoxStyles.measureBox]}>
  57.           <View style={[BoxStyles.right]}><Text>height</Text></View>
  58.         </View>
  59.         <View style={[BoxStyles.bottom,BoxStyles.height50]} ><Text>width</Text></View>
  60.         <View style={[BoxStyles.label]}><Text>element</Text></View>
  61.         <View style={[BoxStyles.widthdashed]}></View>
  62.         <View style={[BoxStyles.heightdashed]}></View>
  63.       </View>
  64.   )
  65. }
  66. }




  67. class DongFang extends Component {
  68.   render(){
  69.   return (
  70.       <MargginBox>
  71.         <BorderBox>
  72.           <PaddingBox>
  73.             <ElementBox>
  74.             </ElementBox>
  75.           </PaddingBox>
  76.         </BorderBox>
  77.       </MargginBox>
  78.   )
  79. }
  80. }

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

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


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

使用道具 举报

0

主题

8

帖子

32

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
32
发表于 2016-6-17 16:59:24 | 显示全部楼层
6666666666666666
回复 支持 反对

使用道具 举报

0

主题

8

帖子

32

积分

RN高级VIP

Rank: 9Rank: 9Rank: 9

积分
32
发表于 2016-6-17 16:59:40 | 显示全部楼层
找见了~~~~~~~
回复

使用道具 举报

0

主题

69

帖子

178

积分

注册会员

Rank: 2

积分
178
发表于 2016-7-15 15:04:01 | 显示全部楼层
学习了。。。。。。。
回复

使用道具 举报

1

主题

38

帖子

103

积分

注册会员

Rank: 2

积分
103
发表于 2016-7-24 21:55:07 | 显示全部楼层
牛逼,66666666666666666
回复 支持 反对

使用道具 举报

0

主题

26

帖子

54

积分

注册会员

Rank: 2

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

使用道具 举报

0

主题

52

帖子

106

积分

注册会员

Rank: 2

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

使用道具 举报

0

主题

24

帖子

66

积分

注册会员

Rank: 2

积分
66
发表于 2016-9-7 15:28:54 | 显示全部楼层
ganxie  fenxiang
回复 支持 反对

使用道具 举报

0

主题

19

帖子

52

积分

注册会员

Rank: 2

积分
52
发表于 2016-9-11 14:38:22 | 显示全部楼层

学习了。。
回复

使用道具 举报

0

主题

54

帖子

128

积分

注册会员

Rank: 2

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

使用道具 举报

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

本版积分规则

QQ|Archiver|手机版|小黑屋|人工智能工程师的摇篮 ( 湘ICP备18018285号-2  

GMT+8, 2020-4-9 02:05 , Processed in 0.250587 second(s), 30 queries .

Powered by Discuz! X3.2

© 2001-2013 Comsenz Inc.

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