专栏首页京程一灯React-Native入门指南 终章

React-Native入门指南 终章

React-Native入门指南 终章啦,大家猜猜明天会有什么内容更新呢?

六、UI组件

1、目前React-Native支持的组件

在facebook React-native的官网可以看到目前支持的组件如下: https://facebook.github.io/react-native/docs/getting-started.html#content

2、如何正确运行UI组件Example

我们可以到react-native的github项目地址找到example,地址是https://github.com/facebook/react-native/tree/master/Examples/UIExplorer。下载react-native的代码库,将UIExplorer目录下的所有文件拷贝到你新建的项目中。其实UIExplorerApp.js就是整个项目的启动的文件。有两种方式可以启动项目: (1)第一种是修改jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle"]; (2)第二种就是将UIExplorerApp.js里面的代码复制到index.ios.js中,此时,注意: AppRegistry.registerComponent('HelloWorld', () => UIExplorerApp); HelloWorld是你的项目名称,如果已经启动项目,需要确保这个名称一致。 项目启动后的界面如下,你就可改改UI组件看效果了。

3、活动指示器组件

其实,每个组件如何使用,可以到demo中去看代码。这里做简单的介绍.活动指示器组件可以做loading,下拉刷新等

4、日历组件

5、图片组件

6、导航器组件

7、导航组件

8、开关组件

其余组件可以查看demo运行和学习,其实就是相当于html标签,具有某种功能,习惯就好。

七、JSX在React-Native中的应用

1、JSX概述

你一定疑问为什么要用JSX?其实这不是必需,而是建议。只是因为React是作为MVC中的V,是为UI而生,所以,React-Native使用JSX更能像HTML样表达树形结构,其实HTML的超类就是XML,React-Native将这个带到了解放前,不可否认的是JSX相比节省了很多的代码。JSX不是什么新奇的东西,JSX只是对JavaScript进行了拓展,仅此而已。

2、语法介绍

(1)类XML UI组件表达,在React-Native中表现为:

render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> Welcome to React Native! </Text> </View> ); } (2)js表达式 在JSX中,表达式需要{}包裹,例如: render: function() { return ( <View style={styles.container}> <Text style={styles.welcome}> {0? '第一段': '第二段'} </Text> </View> ); }

上面的代码我们可以看出,style={}是一个表达式;{0? '第一段': '第二段'}是表达式,最后显示的应该是“第二段”。

(3)属性 在HTML中,属性可以是任何值,例如:<div tagid="00_1"></div>,tagid就是属性;同样,在组件上可以使用属性。 建议使用以下方式: var props = { tagid: 'GGFSJGFFATQ', poiname: '东方明珠' }; return (<View {...props}></View>); (4)如果需要在调用组件的时候动态增加或者覆盖属性,又该如何呢? 很简单:<View {...props} poiname={'虹桥机场'}></View>

(5)关于样式 1)普通内联样式:{{}},第一层{}是表达式,第二层{}是js对象; <View style={{fontSize:40, width:80,}}> </View> 2)调用样式表:{样式类.属性} <View style={styles.container}></View> 3)样式表和内联样式共存:{[]} <View style={[styles.container, {fontSize:40, width:80}]}> 4)多个样式表:{[样式类1, 样式类2]} <View style={[styles.container, styles.color]}>

(6)属性校验 为了实现强类型语言的效果,我们可以使用propTypes来声明数据属性的合法性校验。例如: React.createClass({ porpTypes:{ username: React.PropTypes.string, age: React.propTypes.number, } }); (7)设定默认属性 React.createClass({ getDefaultProps: function(){ return { sign: '这个家伙很懒,什么都没留下' }; } }); (8)组件的生命周期 componentWillMount:组件创建之前 getInitialState:初始化状态 render:渲染视图 componentDidMount:渲染视图完成后 componentWillUnmount:组件被卸载之前

3、了解虚拟DOM

React进行了虚拟DOM的封装,所有的视图的更新都是虚拟DOM做了一个校验(diff)后最小更新。为什么这么做,因为现在机器的内存已经足以支撑这样视图UI的diff计算,用内存计算换取UI渲染效率。 (1)我们需要获取组件中真实的dom React.findDOMNode(component) (2)第二节已经简单说了组件的生命周期(will, did) 组件的生命周期分为3个部分: Mounting:正在装载组件; Updating:重新计算渲染组件; Unmounting:卸载组件

八、动手写组件

React-Native的核心思想就是组件化,相当于MVC的view,因此开发应用的最佳方式就是将功能组件化。

1、最简单的方式

这里我们实现一个最简单的组件,就是邮件的末尾署名的组件。组件意味着复用,意味着统一。现在有这样一个需求,我们需要根据不同用户发送邮件时,生成每个用户的名片(即邮件末尾的署名)。

(1)一般一开始的实现方式如下,直接将组件内容写到功能需求的地方: <View> <View>..........这里是当前邮件组的其它功能</View> <View> <Text>框架研发部</Text> <Text>www.ctrip.com</Text> </View> </View> (2)有一天,其它的部门的同事提出他们也需要在其他的地方,增加他们的邮件署名,那么你是否又会复制一份代码呢,当然不是,我们可以组件化: var Email = React.createClass({ render: function(){ return ( <View style={styles.container}> <Text style={styles.text}>{this.props.name}</Text> <Text style={styles.text}>{this.props.url}</Text> </View> ); } }); (3)整体的代码如下:

2、循环一个文章列表

要实现的效果如下图:

第一步改造我们的组件 var Article = React.createClass({ render: function(){ return ( <View style={styles.container}> <Text style={[styles.text, styles.title]}>{this.props.title}</Text> <Text style={styles.text}>{this.props.author}</Text> <Text style={styles.text}>{this.props.time}</Text> </View> ); } });

第二步定义数据model和循环

var App = React.createClass({ getInitialState: function(){ var data = [ { title: "React-Native入门指南", author: "vczero", time: "2015-06-28" }, { title: "为什么世界不一样", author: "vczero", time: "2015-06-8" }, { title: "你来,我就告诉你", author: "vczero", time: "2015-04-01" } ]; return { articles: data }; },

render: function(){ return( <ScrollView> {this.state.articles.map(function(article){ return <Article title={article.title} author={article.author} time={article.time}/> })} </ScrollView> ); } }); 整个代码如下:

九、React Native 与 App 集成方案

1、前言

Facebook提供了“Integrating with Existing Apps”方案,但是需要使用pod install, 会出现版本更新不及时。那么如何手动集成到Native代码中去呢?这里提供一个简单的Demo供参考。

2、构建步骤

(1)创建 React Native项目,目的是获取最新的React Native包 $ react-native init test (2) 创建 Native项目,例如ReactTest (3) 将test/node_modules拷贝到ReactTest根目录下 (4) 在ReactTest项目中创建Group:Libraries (5) 在Group:Libraries中添加依赖的React Native项目: /node_modules/react-native/React/React.xcodeproj /node_modules/react-native/Libraries/Text/RCTText.xcodeproj /node_modules/react-native/Libraries/WebSocket/RCT WebSocket.xcodeproj 添加完成如下图

(6)Build Rules中添加静态库文件,如下图

(7)添加依赖循环

$(SRCROOT)/node_modules/react-native/React 如下图所示:

(8)修改AppDelegate.m应用启动代码

#import "AppDelegate.h"

#import "ViewController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { if(!self.window){ self.window = [[UIWindow alloc]init]; } self.window.frame = [[UIScreen mainScreen]bounds]; self.window.backgroundColor = [UIColor whiteColor]; self.window.rootViewController = [ViewController new]; [self.window makeKeyAndVisible]; return YES; }

(9)在ViewController.m中调用React Native和Native混编

#import "ViewController.h" #import "RCTRootView.h" @interface ViewController () @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIButton *searchBtn = [[UIButton alloc]init]; searchBtn.frame = CGRectMake(0 + 5, 0, 100, 100); searchBtn.backgroundColor = [UIColor colorWithRed:0.000 green:0.569 blue:1.000 alpha:1]; [searchBtn setTitle:@"搜索" forState:UIControlStateNormal]; [searchBtn setTitle:@"搜索" forState:UIControlStateHighlighted]; NSURL *jsCodeLocation; jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"]; RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"Study" initialProperties:nil launchOptions:nil]; rootView.frame = [[UIScreen mainScreen]bounds]; [self.view addSubview:rootView]; [self.view addSubview:searchBtn];

}

- (void)didReceiveMemoryWarning {

[super didReceiveMemoryWarning]; // Dispose of any resources that can be recreated. } @end

(10)还需要设置下Other Linker Flags, 如下图

(11)OK 享受编程吧

本文转载自github大咖个人博客,原作者授权发布

原作者:vczero

转自:https://github.com/vczero/react-native-lesson

本文分享自微信公众号 - 京程一灯(jingchengyideng),作者:vczero

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2016-11-18

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • React-Native入门指南(一)

    最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框...

    疯狂的技术宅
  • React Native 一年实践回顾

    组内对于 React Native 的实践已经快一年了,我们组主要负责的是美团外卖 M 端的前端业务,涵盖了美团外卖的 CRM、供应链、合同和结算等系统,我们的...

    疯狂的技术宅
  • ReactJS和React-Native的主要区别在哪里

    React-Native已经存在了约2年,而且因为它能被Android使用让我们构建跨平台的移动app而成为真正有趣的框架。一些开发者还为构建适用于Mac和Wi...

    疯狂的技术宅
  • React-Native入门指南(一)

    最近手头的工作繁多,有研究性的项目和系统研发,正好遇到同事离职,接手了框架的UI组件,不仅需要维护和填坑,还需要开发新的功能组件。因为身在H5-Hybird的框...

    疯狂的技术宅
  • chapter01

    React Native使你只使用JavaScript也能编写原生移动应用。 它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面。

    风语者14
  • Go语言开发RESTFul JSON API

    也许我们之前有使用过各种各样的API, 当我们遇到设计很糟糕的API的时候,简直感觉崩溃至极。希望通过本文之后,能对设计良好的RESTful API有一个初步认...

    李海彬
  • java注解的工作原理及使用场景(Demo小记)

    挑战者
  • dotNET跨平台相关文档整理

    张善友
  • LeetCode 368. Largest Divisible Subset分析代码

    这里需要发现一个规律,就是如果result中已经有【1,2】,那么对于要新加进来的数,只要它能整除掉result中最大的数就可以,因为如果先把result按大小...

    desperate633
  • dotNET跨平台相关文档整理

    一直在从事C#开发的相关技术工作,从C# 1.0一路用到现在的C# 6.0, 通常情况下被局限于Windows平台,Mono项目把我们C#程序带到了Window...

    张善友

扫码关注云+社区

领取腾讯云代金券