[关闭]
@garygchai 2016-05-18T15:40:24.000000Z 字数 5240 阅读 1859

reactnative集成到原生ios项目

reactnative


经过一个月的折腾,我们终于将reactnative项目成功地集成到酷狗8.0的ios端,并完成所有原生app与javascript交互的所有功能,接下来将会继续在独立繁星app中做集成,下面是酷狗live项目回顾页的截图:
酷狗live项目回顾页
大概功能就是:视频部分是原生app,视频以下部分是js,js可以通知视频播放哪个视频,视频可以通知js视频播放,或者播放下一个等等。

下面我想通过一个简单的ios项目介绍一下原生ios项目是如何与reactnative集成的。
先贴一下官方教程:

Integrating with Existing Apps
植入原生应用

对已有项目,官方推荐用CoCoaPods(一个帮助ios开发人员更方便地管理第三方依赖的工具)进行项目集成,不过悲催的是,当我把我们的酷狗ios项目clone下来才发现,他们并没有使用Cocoapods,而且他们也不推荐使用,因为Cocoapods管理第三方依赖的时候会自动创建一些目录,不便整个团队的管理。好吧,那就只能手动集成咯~

下面我使用Xcode创建一个新的项目作为我们原生的ios项目:

打开Xcode -> Create a new Xcode project -> Single View Application -> ReactnativeIOS

ReactnativeIOS

现在,我们已经存在一个名为ReactnativeIOS的ios项目,下面我们看看怎么集成reactnative到该项目中。

1、安装react-native

我们在ReactnativeIOS项目目录建一个reactnative目录,用于存放我们的react-native相关文件,再创建一个package.json文件,用于初始化react-native。
reactnative_dir

  1. //package.json
  2. {
  3. "name": "ReactnativeIOS",
  4. "version": "0.0.1",
  5. "private": true,
  6. "dependencies": {
  7. "react": "^0.14.8",
  8. "react-native": "^0.22.2"
  9. }
  10. }

执行安装:
$ cd reactnative
$ npm install

安装成功后,reactnative目录会产生一个node_modules,里面就是react-native依赖的所有项目包。

2、创建index.ios.js文件

在reactnative目录下创建index.ios.js文件:

  1. //index.ios.js
  2. 'use strict';
  3. var React = require('react-native');
  4. var {
  5. Text,
  6. View
  7. } = React;
  8. var styles = React.StyleSheet.create({
  9. container: {
  10. flex: 1,
  11. backgroundColor: 'red'
  12. }
  13. });
  14. class SimpleApp extends React.Component {
  15. render() {
  16. return (
  17. <View style={styles.container}>
  18. <Text>This is a simple application.</Text>
  19. </View>
  20. )
  21. }
  22. }
  23. React.AppRegistry.registerComponent('SimpleApp', () => SimpleApp);

这就是我们js程序的入口文件。ok,以上我们已经完成react-native的准备工作,接下来要开始集成啦~

3、手动集成react-native

如果你的项目使用了Cocoapods,可以跳过这一步,直接看第4步,使用Cocoapods集成react-native。

  1. 添加`react-native/React/React.xcodeproj`到项目中
  2. 添加`react-native/Libraries/Network/RCTNetwork.xcodeproj`到项目中
  3. 添加`react-native/Libraries/Text/RCTText.xcodeproj`到项目中
  4. 添加`react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj`到项目中
  5. 添加`react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj`到项目中

如图所示:
Add React Libaries

添加的原则是,你需要什么就添加什么工程包。好了,我们已经将React相关工程包手动添加到ReactnativeIOS工程项目的reactnative目录下。

Add frameworks

点击+号,将所有.a文件选中并添加。
Add workspaces

这样我们就react-native集成到现有的ios工程中了。

以上是手动集成react-native工程到现有ios中,如果项目中使用了Cocoapods或者你现在就想用Cocoapods,怎么做呢?

4、Cocoapods集成react-native

如果你已经完成了第三步的手动集成,可以跳过这一步。

  1. # 取决于你的工程如何组织,你的node_modules文件夹可能会在别的地方。
  2. # 请将:path后面的内容修改为正确的路径。
  3. pod 'React', :path => './reactnative/node_modules/react-native', :subspecs => [
  4. 'Core',
  5. 'RCTNetwork',
  6. 'RCTText',
  7. 'RCTWebSocket',
  8. # 添加其他你想在工程中使用的依赖。
  9. ]

记得要添加所有你需要的依赖。举例来说,元素如果不添加RCTText依赖就不能运行。

5、添加react-native应用

下面我们在原生ios应用中添加一个视图容器,用于展示react-native实现的内容。

修改ReactView.m

  1. #import "ReactView.h"
  2. #import <RCTRootView.h>
  3. @implementation ReactView
  4. /*
  5. // Only override drawRect: if you perform custom drawing.
  6. // An empty implementation adversely affects performance during animation.
  7. - (void)drawRect:(CGRect)rect {
  8. // Drawing code
  9. }
  10. */
  11. - (instancetype)initWithFrame:(CGRect)frame
  12. {
  13. if (self = [super initWithFrame:frame]) {
  14. NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
  15. NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
  16. RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
  17. moduleName:@"SimpleApp"
  18. initialProperties:nil
  19. launchOptions:nil];
  20. [self addSubview:rootView];
  21. rootView.frame = self.bounds;
  22. }
  23. return self;
  24. }
  25. @end

ReactView.m中通过http://localhost:8081/index.ios.bundle?platform=ios&dev=true加载bundle文件,由RCTRootView解析转化原生的UIView,然后通过initWithFrame将frame暴露出去。

  1. #import "ViewController.h"
  2. #import "ReactView.h"
  3. @interface ViewController ()
  4. @property (weak, nonatomic) IBOutlet ReactView *reactView;
  5. @end
  6. @implementation ViewController
  7. - (void)viewDidLoad {
  8. [super viewDidLoad];
  9. // Do any additional setup after loading the view, typically from a nib.
  10. ReactView * reactView = [[ReactView alloc] initWithFrame:CGRectMake(0, 40, CGRectGetWidth(self.view.bounds), 100)];
  11. [self.view addSubview:reactView];
  12. }
  13. - (void)didReceiveMemoryWarning {
  14. [super didReceiveMemoryWarning];
  15. // Dispose of any resources that can be recreated.
  16. }
  17. @end

至此,我们所有的集成工作已经完成,接下来就是运行项目啦。

6、启动开发服务器

在运行我们的项目之前,我们需要先启动我们的开发服务器。进入reactnative目录,然后启动。
$ cd reactnative
$ react-native start

react-native start

看到上面的界面就标示我们的服务已经启动啦!

7、更新App Transport Security

直接运行项目会报Could not connect to development server错误,官网中有这段话:

在iOS 9以上的系统中,除非明确指明,否则应用无法通过http协议连接到localhost主机。
我们建议你在Info.plist文件中将localhost列为App Transport Security的例外。
如果不这样做,在尝试通过http连接到服务器时,会遭遇这个错误 - Could not connect to development server.

打开工程中的Info.list文件,添加下面配置即可:

  1. <key>NSAppTransportSecurity</key>
  2. <dict>
  3. <key>NSExceptionDomains</key>
  4. <dict>
  5. <key>localhost</key>
  6. <dict>
  7. <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
  8. <true/>
  9. </dict>
  10. </dict>
  11. </dict>

8、运行ios项目

通过Xcode点击项目或者command + R运行项目,如果顺利的话,就会看到成功运行的界面:

Simple App

大功告成!掌握了原生ios项目集成raectnative的方法之后,我们就可以尽情地在原生项目中撸js代码啦~

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注