尊重版权,未经授权不得转载
本文来自:江清清的技术专栏()
今天我们来看一下React Native移植到iOS原生应用,通过本节讲解,相信大家对于正在开发的iOS原生项目就可以移植到React Native平台中来,或者采取原生加RN混合开发模式啦。
刚创建的React Native技术交流5群(),欢迎各位大牛,React Native技术爱好者加入交流!同时博客右侧欢迎微信扫描关注订阅号,移动技术干货,精彩文章技术推送!
React更多的是作为MVC模式中的V视图层存在，所以该就非常容易嵌入到非React Native开发的应用中。实际上，该可以和常见的工具进行结合，例如CocoaPods().
(二)准备工作
1.安装CocoaPods
-这个相应大家如果之前做过iOS开发应该都清除的吧。安装命令:gem install
注意如果出现安装权限问题,可以运行sudo gem install cocoapods命令
-如果大家已经在Mac平台已经成功运行过React Native应用，那么该肯定是安装了()。安装nvm的教程点击命令，该命令会进行安装最新的Node.js版本，然后配置好环境变量。最后你可以通过命令node来启动运行Node.js环境。大家可能也知道，通过nvm，大家可以安装多个Node.js版本并且很方便的进行切换选择。
3.间接着,你可以命令切换到你的项目的根目录，命令运行npm install react-native来进行安装react-native包依赖。
以上步骤完成之后，在你项目根目录上面会存在一个React Native包，该命名为node_modules，和.xcodeproj文件平级。
(三)使用CocoaPods进行安装React Native库
CocoaPods是iOS/Mac开发中的包管理器，我们需要使用CocoaPods来进行下载React Native。如果你到现在还没有安装CocoaPods，那么
，至于具体怎么样安装相信大家看官方向导或者百度一下，就会了。
当你用CocoaPods进行工作的时候，需要往Podfile文件中添加如下的一些代码信息。如果你还没有该文件，可以在项目的根目录上面进行创建一下。具体需要添加的信息如下:
# Depending on how your project is organized, your node_modules directory may be
# tell CocoaPods where you've installed react-native from npm
pod 'React', :path =& './node_modules/react-native', :subspecs =& [
'RCTImage',
'RCTNetwork',
'RCTText',
'RCTWebSocket',
# Add any other subspecs you want to use in your project
记住需要添加安装所有的组件模块依赖才可以，例如如果你需要使用&Text&元素，但是如果没有安装RCTText，那么不行啦。
然后运行命令进行安装: pod install
(四)创建React Native应用
下面你两个注意步骤:
1.应用的入口/根JavaScript文件必须包含你的实际React Native应用和其他组件
2.封装Objective-C代码，加载你的脚本代码和创建一个RCTRootView对象来显示和管理你的React Native组件。
现在我们开始创建啦：
首先创建一个文件夹来存放应用的React代码，然后新建一个简单的index.ios.js文件，具体命令如下:
$ mkdir ReactComponent
$ touch ReactComponent/index.ios.js
复制和粘贴如下的代码到index.ios.js文件中，这是一个最简单的React Native应用啦;
'use strict';
import React, {
} from 'react-native';
conststyles = React.StyleSheet.create({
container: {
backgroundColor: 'red'
class SimpleApp ponent {
render() {
&View style={styles.container}&
&Text&This is a simple application.&/Text&
React.AppRegistry.registerComponent('SimpleApp', () =& SimpleApp);
上面代码中的SimpeApp就是你的模块名称，该名称请记住，后边需要用到的哦~
(五)往应用中添加容器视图
现在你需要一个容器视图来转载React Native组件，该可以为你应用中任何的UIView。
当然了，为了我们的代码更加整洁干净,我们创建一个继承UIView的ReactView。你点击YourProject.xcworkspace(具体你本地的项目)，然后创建一个新的类ReactView(当然你可以随你自己喜欢进行命名…)
// ReactView.h
#import &UIKit/UIKit.h&
@interface ReactView : UIView
然后在需要管理这个视图的ViewController中，添加关联。
// ViewController.m
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ReactView *reactV
[注意].如果你的是Swift应用，就不需要这一步。同时这边我为了简化的演示相关效果，已经禁用了AutoLayout了，但是在实际的开发中，那么就需要打开AutoLayout并且设置相关约束。
(六)往容器视图中添加RCTRootView
前面我们已经做了好多准备工作了，那么现在重点来了，最后在确定一遍，你准备好了没？现在我们需要来创建RCTRootView来引入React Native应用了。
在ReactView.m文件中，我们首先需要加载index.ios.bundle文件来初始化RCTRootView, index.ios.bundle文件会由React Native Server进行创建并且可以通过React Native服务访问到。这个我们之后的教程会讲解到啦。
NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
// For production use, this `NSURL` could instead point to a pre-bundled file on disk:
NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
// To generate that file, run the curl command and add the output to your main Xcode build target:
curl http://localhost:8081/index.ios.bundle -o main.jsbundle
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName: @"SimpleApp"
initialProperties:nil
launchOptions:nil];
然后把它添加成ReactView的子视图
[self addSubview:rootView];
rootView.frame = self.
(七)Swift应用
如果你的是Swift应用的话，那么需要你在ReactView.swift文件中添加如下代码:
import UIKit
import React
class ReactView: UIView {
let rootView: RCTRootView = RCTRootView(bundleURL: NSURL(string: "http://localhost:8081/index.ios.bundle?platform=ios"),
moduleName: "SimpleApp", initialProperties: nil, launchOptions: nil)
override func layoutSubviews() {
super.layoutSubviews()
loadReact()
func loadReact () {
addSubview(rootView)
rootView.frame = self.bounds
最后你需要确定一下你的该视图有没有添加到视图容器中或者故事板文件中(StoryBoard)
(八)启动开发服务器
在项目根目录中，我们需要开启React Native开发服务器，具体命令如下:
(JS_DIR=`pwd`/ReactCcd node_modules/react- npm run start -- --root $JS_DIR)
以上的命令，可以开启React Native开发服务，来构建我们的bundle文件。--root选项用来标注React Native应用所在的根目录。我们当前的例子是ReactComponents目录，在该文件夹中有一个index.ios.js文件。服务器启动之后会进行打包出来index.ios.bundle文件，然后让我们可以通过http://localhost:8081/index.ios.bundle进行访问。
(九)更新App Transport Security
在iOS9.0开始或者更高版本的系统中，除非特别配置，否则我们的应用是不能通过http访问localhost主机服务器的。具体解决方案可以查看:
解决方案:推荐大家在应用的Info.plist文件作如下修改，把localhost本机访问排查例外项。
&key&NSAppTransportSecurity&/key&
&key&NSExceptionDomains&/key&
&key&localhost&/key&
&key&NSTemporaryExceptionAllowsInsecureHTTPLoads&/key&
如果大家没有这样做，那么可能会遇到Could not connect to development server的错误哦
(十)编译和运行
现在开始编译和运行你的应用，你会发现你的React Native应用运行在ReactView视图容器中了，具体截图如下
注意在模拟器调试中我们可以实现热加载的(只要修改了JS代码，模拟器页面自动刷新的效果，确保在Build Settings-&Preprocessor Macros中设置DEBUG=1)
(十一)最后总结
该效果的底层机制为，当RCTRootView被初始化的时候，该会从React Native开发服务器中下载并且解析加载bundle文件。这就意味着我们我们只要实现自己的视图容器或者ViewController，然后引入RCTRootView，该会进行加载渲染我们的React组件。特别说一下当前官方文档的官方实例代码
今天我们主要学习了一下怎么样将React Native移植到iOS平台。大家有问题可以加一下群React Native技术交流5群().或者底下进行回复一下。
尊重原创，未经授权不得转载：From Sky丶清（） 侵权必究！
关注我的订阅号(codedev123),每天分享移动开发技术(Android/IOS),项目管理以及博客文章!(欢迎关注，第一时间推送精彩文章)
关注我的微博，可以获得更多精彩内容
在线用户: 2今日访问: 7,904昨日访问: 9,394累计访问: 6,273,160中国领先的IT技术网站
51CTO旗下网站
ReactNative之原生模块开发并发布--iOS篇
前段时间做了个ReactNative的App，发现ReactNative中不少组件并不存在，所以还是需要自己对原生模块进行编写让JS调用， 正是因为在这个编写过程中遇到不少问题，发觉了官网文档中许多的不足。所以产生了写一个实践教程的想法，最终有了这么一篇文章。
作者：刘春桂来源：| 13:21
前段时间做了个ReactNative的App，发现ReactNative中不少组件并不存在，所以还是需要自己对原生模块进行编写让JS调用， 正是因为在这个编写过程中遇到不少问题，发觉了官网文档中许多的不足。所以产生了写一个实践教程的想法，最终有了这么一篇文章。
整篇文章主要以编写一个原生模块为例子，来讲述了我们在编写原生模块所用到的一些知识，并且在整个例子中，配有了完整的实践代码，方便大家理解并调 试。除了这些内容，文章还讲述了我们如何将自己编写的原生模块发布到npm上分享给别人使用。希望能够给大家带来帮助，也希望大家将自己编写的原生模块分 享出来。
示例代码github地址：
准备工作：
创建ReactNative工程
我们需要先创建一个ReactNative工程，使用如下命令创建。
react&native&init&TestProject&
创建好工程之后，我们使用xcode打开TestProject/ios/下的iOS工程。
创建静态库，并将这个静态库手动链接到工程中
首先，我们在前面创建的ReactNative工程下的node_modules创建一个文件夹react-native-BGNativeModuleExample，然后我们在新创建的文件夹下再创建一个ios文件夹。
$&cd&TestProject/node_modules&$&mkdir&react-native-BGNativeModuleExample&$&cd&react-native-BGNativeModuleExample&$&mkdir&ios&
然后，由于ReactNative的组件都是一个个静态库，我们发布到npm给别人使用的话，也需要建立静态库。我们使用Xcode建立静态库，取 名为BGNativeModuleExample。建立之后，我们将创建的静态库中的文件全部copy到node_modules/react- native-BGNativeModuleExample/ios目录下。
iOS文件目录如下：
|____BGNativeModuleExample&|&|____BGNativeModuleExample.h&|&|____BGNativeModuleExample.m&|____BGNativeModuleExample.xcodeproj&
最后，我们需要手动将这个静态库链接到工程中。
1、使用xcode打开创建的静态库，添加一行Header Search Paths，值为$(SRCROOT)/../../react-native/React，并设置为recursive。
2、将BGNativeModuleExample静态库工程拖动到工程中的Library中。
3、选中 TARGETS =& TestProject =& Build Settings =& Link Binary With Libraries，添加libBGNativeModuleExample.a这个静态库
到此，我们准备工作完成了。我们这里这么准备是有用意的，那就是模拟npm链接的过程，建立好了环境，避免了发布到npm上后别人使用找不到静态库的问题。
一、编写原生模块代码
1、创建原生模块
选中我们创建的BGNativeModuleExample静态库，然后在BGNativeModuleExample.h文件中导入RCTBridgeModule.h，让BGNativeModuleExample类遵循RCTBridgeModule协议。
&#import&#import&&RCTBridgeModule.h&&@interface&BGNativeModuleExample&:&NSObject&@end&
在BGNativeModuleExample.m文件中，我们需要实现RCTBridgeModule协议。为了实现 RCTBridgeModule协议，我们的类需要包含RCT_EXPORT_MODULE()宏。这个宏也可以添加一个参数用来指定在 Javascript中访问这个模块的名字。如果不指定，默认会使用这个类的名字。
在这里，我们指定了模块的名字为BGNativeModuleExample。
RCT_EXPORT_MODULE(BGNativeModuleExample);&
实现了RCTBridgeModule协议之后，我们就可以在js中如下获取到我们创建的原生模块。
import&{&NativeModules&}&from&'react-native';&var&BGNativeModuleExample&=&NativeModules.BGNativeModuleE&
需要注意的是，RCT_EXPORT_MODULE宏传递的参数不能是OC中的字符串。如果传递 @&BGNativeModuleExample&，那么我们导出给JS的模块名字其实是@&BGNativeModuleExample&，使用 BGNativeModuleExample就找不到了。在这里，我们其实可以通过打印NativeModules来查找到我们创建的原生模块。
2、为原生模块添加方法
我们需要明确的声明要给JS导出的方法，否则ReactNative不会导出任何方法。声明通过RCT_EXPORT_METHOD()宏来实现：
RCT_EXPORT_METHOD(testPrint:(NSString&*)name&info:(NSDictionary&*)info)&{&&&RCTLogInfo(@&%@:&%@&,&name,&info);&}&
在JS中，我们可以这样调用这个方法：
BGNativeModuleExample.testPrint(&Jack&,&{&&&height:&'1.78m',&&&weight:&'7kg'&});&
3、参数类型
RCT_EXPORT_METHOD()支持所有标准的JSON类型，包括：
string (NSString)
number (NSInteger, float, double, CGFloat, NSNumber)
boolean (BOOL, NSNumber)
array (NSArray) 包含本列表中任意类型
map (NSDictionary) 包含string类型的键和本列表中任意类型的值
function (RCTResponseSenderBlock)
除此以外，任何RCTConvert类支持的的类型也都可以使用(参见RCTConvert了解更多信息)。RCTConvert还提供了一系列辅助函数，用来接收一个JSON值并转换到原生Objective-C类型或类。
了解更多请点击。
4、回调函数
警告：本章节内容目前还处在实验阶段，因为我们还并没有太多的实践经验来处理回调函数。
回调函数，在官方的文档中是有上面的一个警告，不过在使用过程暂时未发现问题。在OC中，我们添加一个getNativeClass方法，将当前模块的类名回调给JS。
RCT_EXPORT_METHOD(getNativeClass:(RCTResponseSenderBlock)callback)&{&&&callback(@[NSStringFromClass([self&class])]);&}&
在JS中，我们通过以下方式获取到原生模块的类名
BGNativeModuleExample.getNativeClass(name&=&&{&&&console.log(&nativeClass:&&,&name);&});&
原生模块通常只应调用回调函数一次。但是，它们可以保存callback并在将来调用。这在封装那些通过&委托函数&来获得返回值的iOS API时最常见。
5、Promises
原生模块还可以使用promise来简化代码，搭配ES2016(ES7)标准的async/await语法则效果更佳。如果桥接原生方法的最后两 个参数是RCTPromiseResolveBlock和RCTPromiseRejectBlock，则对应的JS方法就会返回一个Promise对 象。
我们通过Promises来实现原生模块是否会响应方法，响应则返回YES，不响应则返回一个错误信息，代码如下：
RCT_REMAP_METHOD(testRespondMethod,&&&&&&&&&&&&&&&&&&name:(NSString&*)name&&&&&&&&&&&&&&&&&&resolver:(RCTPromiseResolveBlock)resolve&&&&&&&&&&&&&&&&&&rejecter:(RCTPromiseRejectBlock)reject)&{&&&if([self&respondsToSelector:NSSelectorFromString(name)])&{&&&&&resolve(@YES);&&&}&&&else&{&&&&&reject(@&-1001&,&@&not&respond&this&method&,&nil);&&&}&}&
在JS中，我们有两种方式调用，第一种是通过then....catch的方式：
BGNativeModuleExample.testRespondMethod(&dealloc&)&&&&&.then(result&=&&{&&&&&&&console.log(&result&is&&,&result);&&&&&})&&&&&.catch(error&=&&{&&&&&&&console.log(error);&&&&&});&
第二种是通过try...catch来调用，与第一种相比，第二种会报警告&Possible Unhandled Promiss Rejection (id:0)&。
async&testRespond()&{&try&{&&&var&result&=&BGNativeModuleExample.testRespondMethod(&hell&);&&&if(result)&{&&&&&console.log(&respond&this&method&);&&&}&}&catch&(e)&{&&&console.log(e);&}&&&}&
注意: 如果使用Promiss我们不需要参数，则在OC去掉name那一行就行了；如果需要多个参数，在name下面多加一行就行了，注意它们之间不需要添加逗号。
我们这里操作的模块没有涉及到UI，所以专门建立一个串行的队列给它使用，如下：
return&dispatch_queue_create(&com.liuchungui.demo&,&DISPATCH_QUEUE_SERIAL);&
注意: 在模块之间共享分发队列
methodQueue方法会在模块被初始化的时候被执行一次，然后会被React
Native的桥接机制保存下来，所以你不需要自己保存队列的引用，除非你希望在模块的其它地方使用它。但是，如果你希望在若干个模块中共享同一个队列， 则需要自己保存并返回相同的队列实例；仅仅是返回相同名字的队列是不行的。
更多线程的操作细节可以参考：
7、导出常量
原生模块可以导出一些常量，这些常量在JavaScript端随时都可以访问。用这种方法来传递一些静态数据，可以避免通过bridge进行一次来回交互。
OC中，我们实现constantsToExport方法，如下：
-&(NSDictionary&*)constantsToExport&{&&&return&@{&@&BGModuleName&&:&@&BGNativeModuleExample&,&&&&&&&&&&&&&TestEventName:&TestEventName&&&&&&&&&&&&&};&}&
JS中，我们打印一下这个常量
console.log(&BGModuleName&value&is&&,&BGNativeModuleExample.BGModuleName);&
但是注意这个常量仅仅在初始化的时候导出了一次，所以即使你在运行期间改变constantToExport返回的值，也不会影响到JavaScript环境下所得到的结果。
8、给JS发送事件
即使没有被JS调用，本地模块也可以给JS发送事件通知。最直接的方式是使用eventDispatcher。
在这里，我们为了能够接收到事件，我们开一个定时器，每一秒发送一次事件。
#import&&BGNativeModuleExample.h&&#import&&RCTEventDispatcher.h&&@implementation&BGNativeModuleExample&@synthesize&bridge&=&_&-&(instancetype)init&{&&&if(self&=&[super&init])&{&&&&&[NSTimer&scheduledTimerWithTimeInterval:1.0&target:self&selector:@selector(sendEventToJS)&userInfo:nil&repeats:YES];&&&}&&&return&&}&-&(void)receiveNotification:(NSNotification&*)notification&{&&&[self.bridge.eventDispatcher&sendAppEventWithName:TestEventName&body:@{@&name&:&@&Jack&}];&}&@end&
在JS中，我们这样接收事件
NativeAppEventEmitter.addListener(BGNativeModuleExample.TestEventName,&info&=&&{&&&&&&&console.log(info);&&&&&});&
注意： 编写OC代码时，需要添加@synthesize bridge = _，否则接收事件的时候就会报Exception
-[BGNativeModuleExample brige]; unrecognized selector sent to
instance的错误。
上面原生代码就编写好了，主要以代码实践为主，弥补官方文档中的一些不足，如果要需要了解更多的原生模块封装的知识，可以参考原生模块，也可以参考官方的源代码。
二、发布上线
我们按照上面步骤编写好原生模块之后，接下来将我们写的原生模块发布到npm。
1、我们需要创建github仓库
在github上创建一个仓库react-native-BGNativeModuleExample，然后关联到我们前面创建的react-native-BGNativeModuleExample目录
$&cd&TestProject/node_modules/react-native-BGNativeModuleExample&$&git&init&.&$&git&remote&add&origin&https:&
2、我们需要创建原生模块的入口文件
我们需要在react-native-BGNativeModuleExample目录下创建一个index.js，它是整个原生模块的入口，我们这里只是将原生进行导出。
&import&React,&{&NativeModules&}&from&'react-native';&module.exports&=&NativeModules.BGNativeModuleE&
3、发布到npm
在发布到npm之前，我们需要创建一个package.json文件，这个文件包含了module的所有信息，比如名称、版本、描述、依赖、作者、 license等。 我们在react-native-BGNativeModuleExample根目录下使用npm
init命令来创建package.json，系统会提示我们输入所需的信息，不想输入的直接按下Enter跳过。
$&npm&init&This&utility&will&walk&you&through&creating&a&package.json&file.&It&only&covers&the&most&common&items,&and&tries&to&guess&sensible&defaults.&See&`npm&help&json`&for&definitive&documentation&on&these&fields&and&exactly&what&they&do.&Use&`npm&install&&--save`&afterwards&to&install&a&package&and&save&it&as&a&dependency&in&the&package.json&file.&Press&^C&at&any&time&to&quit.&name:&(react-native-BGNativeModuleExample)&
输入完成之后，系统会要我们确认文件的内容是否有误，如果没有问题直接输入yes，那么package.json就创建好了。 我这里创建的package.json文件如下：
{&&&&name&:&&react-native-nativemodule-example&,&&&&version&:&&1.0.0&,&&&&description&:&&&,&&&&main&:&&index.js&,&&&&scripts&:&{&&&&&&test&:&&echo&\&Error:&no&test&specified\&&&&&exit&1&&&&},&&&&repository&:&{&&&&&&type&:&&git&,&&&&&&url&:&&git+/liuchungui/react-native-BGNativeModuleExample.git&&&&},&&&&author&:&&&,&&&&license&:&&ISC&,&&&&bugs&:&{&&&&&&url&:&&/liuchungui/react-native-BGNativeModuleExample/issues&&&&},&&&&homepage&:&&/liuchungui/react-native-BGNativeModuleExample#readme&&}&
如果我们编写的原生模块依赖于其他的原生模块，我们需要在package.json添加依赖关系，我们这里由于没有相关依赖，所以不需要添加：
&dependencies&:&{&}&
初始化完package.json，我们就可以发布到npm上面了。
如果没有npm的账号，我们需要注册一个账号，这个账号会被添加到npm本地的配置中，用来发布module用。
$&npm&adduser&Username:&your&name&Password:&your&password&Email:&yourmail@gmail.com&
成功之后，npm会把认证信息存储在~/.npmrc中，并且可以通过以下命令查看npm当前使用的用户：
$&npm&whoami&
以上完成之后，我们就可以进行发布了。
$npm&publish&+&react-native-nativemodule-example@1.0.0&
到这里，我们已经成功把module发布到了npmjs.org。当然，我们也别忘记将我们的代码发布到github。
$&git&pull&origin&master&$&git&add&.&$&git&commit&-m&'add&Project'&$&git&push&origin&master&
有时候，有些文件没必要发布，例如Example文件，我们就可以通过.npmignore忽略它。例如我这里.npmignore文件内容如下：
Example/&.git&.gitignore&.idea&
这样的话，我们npm进行发布的时候，就不会将Example发布到npm上了。
4、添加Example，测试是否可用，添加README
我们在react-native-BGNativeModuleExample目录下创建一个Example的ReactNative工程，并且通 过rnpm install
react-native-nativemodule-example命令安装我们发布的react-native-nativemodule- example模块。
$&rnpm&install&react-native-nativemodule-example&TestProject@0.0.1&/Users/user/github/TestProject&└──&react-native-nativemodule-example@1.0.0&rnpm-link&info&Linking&react-native-nativemodule-example&ios&dependency&rnpm-link&info&iOS&module&react-native-nativemodule-example&has&been&successfully&linked&rnpm-link&info&Module&react-native-nativemodule-example&has&been&successfully&installed&&&linked&
上面提示安装并且link成功，我们就可以在js中进行使用了。
import&BGNativeModuleExample&from&'react-native-nativemodule-example';&BGNativeModuleExample.testPrint(&Jack&,&{&&&&&height:&'1.78m',&&&&&weight:&'7kg'&});&
5、我们在发布上线之后还需要编写README文件。
README文件是非常重要的，如果没有README文件，别人看到我们的原生组件，根本就不知道我们这个组件是用来干啥的。所以，我们很有必要添加一个README文件，这个文件需要告诉别人我们这个原生组件是干什么的、如何安装、API、使用手册等等。
6、原生模块升级，发布新版本
当我们添加新代码或者修复bug后，需要发布新的版本，我们只需要修改package.json文件中的version的值就行了，然后使用npm publish进行发布。
本篇文章主要分成两个部分，一是讲述了编写原生模块的知识，二是将我们编写的内容发布到npm上。
【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
原创头条头条头条头条
24H热文一周话题本月最赞
讲师：218403人学习过
讲师：228043人学习过
讲师：16537人学习过
精选博文论坛热帖下载排行
Visual C++ 6.0是Microsoft公司的Visual Studio开发组件中最强大的编程工具，利用它可以开发出高性能的应用程序。本书由浅入深，从基础到实...
订阅51CTO邮刊使用React Native一年后的感受【android开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：119,116贴子：
使用React Native一年后的感受收藏
引用英文来自：译文来自：当我在面试Discord的时候，技术主管Stanislav跟我说： 引用React Native代表着未来。等它一发布，我们就会用它从零构建iOS应用。作为一名原生iOS开发者，基于先前使用PhoneGap的经验，我非常怀疑使用Web技术构建移动应用的这种方式。但是当我学习并使用React Native一段时间之后，我非常庆幸我们做了这个决定。 开发效率 虽然iOS“团队”只有我自己一个人，但是iOS应用开发依然可以赶上Web和桌面应用开发闪电般的速度。Apple公司已经允许开发者使用JavaScriptCore进行应用的升级，而无需等待App Store的审核流程。这对于那些缺乏专业的iOS QA（质量保障）团队的小公司来说是非常便利的，因为iOS团队可以在发布新功能之后进行热更新。 使用React Native一年之后，我们的iOS开发周期明显变快了，这得益于很高的开发效率。比如： 基于现有的前端架构，我们在两周之内就发布了V1.0的版本。相比于Auto Layout，基于Flexbox的样式可以节省一半的代码，并且更容易理解。使用Flux设计模式，iOS和Web应用共享了store和action的98%的代码。性能 React Native在后台线程运行JavaScript并发送极小的代码到主线程中。事实证明，React Native相比于Objective-C或Swift编写的原生iOS应用来说有一些性能差异！ 引用Reactiflux小组的性能演示，该组有超过1.1万个会员 —— UI和JS线程大多数都是60FPS然而，我们当初开始构建iOS应用时发现聊天滚动视图的性能并不令人满意，尤其是一些活跃的聊天分组。于是，我们决定使用ComponentKit构建聊天视图并编写必要的桥接代码代替原有的方案。当JS线程在完成一些繁重任务的时候，类库也无法提供原生那样流畅的动画（译注：之前动画是在JS线程执行，目前有人提交了一份代码，有望使用原生iOS动画接口），因此我们在抽屉侧滑动画上继续使用PopAnimation。 注： 作者称该应用仅聊天视图和抽屉动画是原生代码实现的，其他均由React Native实现。 当React Native Android版本发布时，我们也尝试在Android设备上运行应用，但遗憾的是，我们遇到了一些性能问题，只好暂时放弃。Android开发主管Miguel是这样说的： 引用很遗憾，不同Android设备的性能差异很大，这点明显落后于iOS。我们可以让应用运行地很快，但是性能——尤其是触摸事件，即使在更高端设备上也不能令人满意。并且在早期，由于React Native Android缺乏完善的功能，我们从产品原型过渡到成品应用比iOS花费了更多时间。可用性
React Native让开发工作更简洁，使得开发者可以专注于每个新版本核心功能的开发。应用内自带的开发者菜单为我节省了大量的时间。 其中我最喜欢的一个功能是Show Inspector（审查工具），它可以即时展现交互视图的层级结构以及被选组件中所有必要的样式信息，这无疑是我用过的最棒的iOS审查工具。 社区 React Native项目每两周会发布一个新版本，其中包含一些新的特性以及修复的bug。这有利有弊，好比iOS几个月的稳定版本的发布，新的代码需要额外的时间进行升级，尤其是生产环境中的应用。因此，这也是到目前为止我们fork的React Native仓库只有四次主要升级的原因。 由于React Native还不太成熟，资源有限，也不完整。但随着它越来越流行，在不久之后一定能赶上其他成熟的技术。下面列出了一些实用的资源，我也经常在它的仓库上提问和获取最新的信息： Reactiflux上的#react-native。js.coach—React Native开源组件列表。awesome-react-native—大量的React Native文章、教程和示例。引用译注：中文资源：React Native学习指南总的来说，React Native很有潜力，它把我们团队的移动应用开发带上了一个新的台阶。像我这样原生的iOS开发者可以平滑地过渡到React Native，这有些出乎我的意料。同时，它也帮助我扩展职业技能，因为我也可以很轻松地向React编写的Web应用贡献代码了。
登录百度帐号推荐应用