Fork me on GitHub

将RN工程嵌入到现有原生iOS应用

今天心血来潮,就想尝试一下将RN工程单独嵌入到原生工程中,所以就做了尝试,本文是通过cocopods集成RN到现有工程的,但是其中也遇到一个问题,怎么编译都不过。

依赖包

React Native的植入过程同时需要React和React Native两个node依赖包,所以需要我们创建package.json文件和正确的RN文件目录结构

对于一个典型的React Native项目来说,一般package.json和index.ios.js等文件会放在项目的根目录下。而iOS相关的原生代码会放在一个名为ios/的子目录中,这里也同时放着你的Xcode项目文件(.xcodeproj)。

88161340-E7F4-46B0-86A9-5A13DCCDA819.png

按照上图的目录结构创建

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
"name": "TestReactNative",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.44.3"
},
"devDependencies": {
"babel-jest": "20.0.3",
"babel-preset-react-native": "2.1.0",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}

安装依赖包

使用npm(node包管理器,Node package manager)来安装React和React Native模块。这些模块会被安装到项目根目录下的node_modules/目录中。 在包含有package.json文件的目录(一般也就是项目根目录)中运行下列命令来安装:

npm install

新建index.ios.js

这个是随便一个index.ios.js即可,我是从一个RN的初始化工程复制了一个出来

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/

import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View
} from 'react-native';

export default class DemoApp extends Component {
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.ios.js
</Text>
<Text style={styles.instructions}>
Press Cmd+R to reload,{'\n'}
Cmd+D or shake for dev menu
</Text>
</View>
);
}
}

const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});

AppRegistry.registerComponent('TestReactNative', () => DemoApp);

至此RN的相关依赖已经配置好,接下来就该配置cocopods了

cocopods配置

1、创建Podfile,如果已经有了可以忽略此步骤

1
2
## 在iOS原生代码所在的目录中(也就是`.xcodeproj`文件所在的目录)执行:
$ pod init

Podfile文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'TestReactNative' do
# Uncomment the next line if you're using Swift or would like to use dynamic frameworks
# use_frameworks!

# Pods for TestReactNative
pod 'React', :path => '../node_modules/react-native', :subspecs => [
'Core',
'DevSupport', # 如果RN版本 >= 0.43,则需要加入此行才能开启开发者菜单
'RCTText',
'RCTNetwork',
'RCTWebSocket', # 这个模块是用于调试功能的
# 在这里继续添加你所需要的模块
]
# 如果你的RN版本 >= 0.42.0,请加入下面这行
pod "Yoga", :path => "../node_modules/react-native/ReactCommon/yoga"
end

subspecs就是你依赖的包。可用的subspec都列在node_modules/react-native/React.podspec 中,基本都是按其功能命名的。一般来说你首先需要添加Core,这一subspec包含了必须的AppRegistry、StyleSheet、View以及其他的一些React Native核心库。如果你想使用React Native的Text库(即组件),那就需要添加RCTText的subspec。同理,Image需加入RCTImage,等等。
2、安装依赖包
执行pod install
C07B6B3E-1642-4EAC-9814-BE6A55C4527C.png
会看到以上过程则表示安装依赖已经成功
3、调用RN工程

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
#import "ViewController.h"
#import <React/RCTRootView.h>

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
}

- (IBAction)actionClick:(id)sender {
NSLog(@"High Score Button Pressed");
NSURL *jsCodeLocation = [NSURL
URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
RCTRootView *rootView =
[[RCTRootView alloc] initWithBundleURL : jsCodeLocation
moduleName : @"TestReactNative"
initialProperties :nil
launchOptions : nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];
}

- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end

至此整集成已经结束,可以直接运行xcode过程,或者通过命令运行工程

1
2
# From the root of your project, where the `node_modules` directory is located.
$ npm start

1
2
# 在项目的根目录中执行:
$ react-native run-ios

不知道大家有没有注意我们package.json中react-native中的版本是”0.44.3”,而为什么不是最新版46的呢??这就是一个很大的坑!从45版本开始RN有4个文件被墙了,所以如果大于44版本的react-native会一直编译不过
有以下3个解决方案:
1、不导入最新的包,导入44版本
2、翻墙呗。。。。
3、下载被墙的4个依赖包,手工导入

优化加载速度

在原生调用RN的时候有点慢。大家在集成的时候会发现加载的过程挺慢的,可以压缩加载本地文件,这样加载就快了。通常我们可以将文件放到服务器上,然后通过IP地址来加载,这种方式其实也是比较慢的,最好的方式就是将文件提前下载到本地,通过一定的更新机制确保本地文件时最新的,通过使用这种方式加载就很快了。

  • 到当前项目的根目录中执行:

    1
    react-native bundle --platform ios --dev false --entry-file index.ios.js --bundle-output ios/main.jsbundle
  • 将main.jsbundle加载到Xcode工程中,然后通过以下方式获取URL地址来加载

    1
    2
    NSString *path = [[NSBundle mainBundle] pathForResource:@"main" ofType:@"jsbundle"];
    NSURL *jsCodeLocation = [NSURL URLWithString:path];

如果大家在这个过程还有不明白的可以留言给我,我将尽最大努力给大家解决的哦

0%