iOS原生项目中集成React Native

迈不过友情╰ 2022-07-12 07:30 238阅读 0赞

1.本文的前提条件是，电脑上已经安装了CocoaPods，React Native相关环境。

2.使用Xcode新建一个工程。EmbedRNMeituan

![Center][]

\[图1\]

3.使用CocoaPods安装React Native

在工程目录下新建Podfile文件，并配置需要使用的第三方库

**\[objc\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  pod 'React', '0.13.0-rc'
2.  pod "React/RCTText"
3.  pod "React/RCTActionSheet"
4.  pod "React/RCTGeolocation"
5.  pod "React/RCTImage"
6.  pod "React/RCTLinkingIOS"
7.  pod "React/RCTNetwork"
8.  pod "React/RCTSettings"
9.  pod "React/RCTVibration"
10. pod "React/RCTWebSocket"
11. platform :ios, '7.0'

注：如果你需要在React Native中使用<Text>，就需要添加 pod "React/RCTText”，否则不能用

然后安装： pod install

这一步会比较慢

安装完成后，添加 Search Paths

输入$(PODS\_ROOT)，选择recursive

![Center 1][]

【图2】

编译一下，会报一个错，提示路径太长

Argument list too long: recursive header expansion failed at /Users/\*\*\*/EmbedRNMeituan/Pods/React/node\_modules/jest-cli/node\_modules/istanbul/node\_modules/escodegen/node\_modules/estraverse.

这里需要修改刚才的设置，将 $(PODS\_ROOT) 改成 $(PODS\_ROOT)/React/React

再次编译，成功。

4.在工程目录下新建Components文件夹，和index.[iOS][].js文件

![Center 2][]

【图3】

并在index.ios.js文件里粘贴一下代码：

**\[javascript\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  'use strict'; 
2.  
3.  **var** React = require('react-native'); 
4.  **var** \{ 
5.   AppRegistry, 
6.   StyleSheet, 
7.   Text, 
8.   View, 
9.  \} = React; 
10. 
11. **var** EmbedRNMeituan = React.createClass(\{ 
12.  render: **function**() \{ 
13. **return** ( 
14.  <View style=\{styles.container\}> 
15.  <Text style=\{styles.welcome\}> 
16.  Welcome to React Native! 
17.  </Text> 
18.  <Text style=\{styles.instructions\}> 
19.  To get started, edit index.android.js 
20.  </Text> 
21.  <Text style=\{styles.instructions\}> 
22.  Shake or press menu button **for** dev menu 
23.  </Text> 
24.  </View> 
25.  ); 
26.  \} 
27. \}); 
28. 
29. **var** styles = StyleSheet.create(\{ 
30.  container: \{ 
31.  flex: 1, 
32.  justifyContent: 'center', 
33.  alignItems: 'center', 
34.  backgroundColor: '\#F5FCFF', 
35.  \}, 
36.  welcome: \{ 
37.  fontSize: 20, 
38.  textAlign: 'center', 
39.  margin: 10, 
40.  \}, 
41.  instructions: \{ 
42.  textAlign: 'center', 
43.  color: '\#333333', 
44.  marginBottom: 5, 
45.  \}, 
46. \}); 
47. 
48. AppRegistry.registerComponent('EmbedRNMeituan', () => EmbedRNMeituan);

以上，React Native部分已经弄完。下面开始原生部分。

5.新建显示React Native的UIView。

用来加载显示React Native的容器是 RCTRootView，它是继承自UIView。

在ViewController.m中

**\[objc\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#import "RCTRootView.h"
2.  
3.  \- (**void**)viewDidLoad \{ 
4.   \[**super** viewDidLoad\]; 
5.  // Do any additional setup after loading the view, typically from a nib.
6.  
7.   \[**self** initRNView\]; 
8.  \} 
9.  
10. \-(**void**)initRNView \{ 
11. **NSURL** \*jsCodeLocation; 
12.  jsCodeLocation = \[NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"\]; 
13. **RCTRootView** \*rootView = \[\[RCTRootView alloc\] initWithBundleURL:jsCodeLocation 
14.  moduleName:@"EmbedRNMeituan"
15.  initialProperties**:nil**
16.  launchOptions**:nil**\]; 
17. //注意，这里是 @"EmbedRNMeituan"
18.  rootView.frame = CGRectMake(0, 64, 300, 300); 
19.  \[**self**.view addSubview:rootView\]; 
20. \}

6.运行

此时如果运行的话，会出现下面的情况

![Center 3][]

【图4】

提示找不到服务器，以及数据传输的安全问题。

6.1允许http请求

打开info.plist文件，添加

![Center 4][]

【图5】

App Transport Security Settings -》 Dictionary

Allow Arbitrary Loads -》 YES

6.2启动服务器

工程目录下，终端输入：

**\[html\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  (cd Pods/React; npm run start)

6.3编写脚本文件run.sh

**\[html\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  vi run.sh

输入

**\[html\]** [view plain][] [copy][view plain]

[![在CODE上查看代码片][CODE]][CODE_CODE] [![派生到我的代码片][ico_fork.svg]][ico_fork.svg 1]

1.  \#! /bin/bash 
2.  (cd Pods/React; npm run start)

然后给run.sh添加可执行权限：**chmod +x run.sh**

之后开启服务器时，只需要在终端输入命令：  **./run.sh**

[Center]: /images/20220711/2979ea0984f143e98de0290ee7d365a1.png
[view plain]: http://blog.csdn.net/l863784757/article/details/50592341#
[CODE]: https://code.csdn.net/assets/CODE_ico.png
[CODE_CODE]: https://code.csdn.net/snippets/1566896
[ico_fork.svg]: https://code.csdn.net/assets/ico_fork.svg
[ico_fork.svg 1]: https://code.csdn.net/snippets/1566896/fork
[Center 1]: /images/20220711/5bd6839bcc5b431a84bdffe35a6cbe09.png
[iOS]: http://lib.csdn.net/base/1
[Center 2]: /images/20220711/a392825704b94b7e97623f763acacfaf.png
[Center 3]: /images/20220711/50b8f5c5c38843ada8817303c34a1151.png
[Center 4]: /images/20220711/df67ac6c3c474eb086b7457cea595690.png