前提
已经配置好React Native命令行环境
1. 通过CocoaPods集成React Native
参考官方文档：
https://reactnative.cn/docs/0.51/integration-with-existing-apps.html#content
使用CocoaPods集成会出现很多问题，下面重点讲一下如何在原有项目中手工快速集成React Native。
2. 手工集成React Native
第一步：初始化React Native环境
运行React Native初始化命令react-native init [Project Name]，init过程会需要一点时间，耐心等待。
以下是执行react-native init Text的效果：
image
完成后项目文件目录会变成这样：
image
-
node_modules:react native依赖包 -
ios:iOS项目相关代码，Xcode工程文件 -
android:Android项目相关代码 -
index.ios.js:iOS平台加载的JS脚本 -
index.android.js：Android平台加载的JS脚本 -
package.json：当前项目的npm package的配置文件，内容如下：
{
"name": "Test",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.3.0-alpha.1",
"react-native": "0.54.0"
},
"devDependencies": {
"babel-jest": "22.4.1",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "^16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}
第二步：添加React Native的Libraries
- 复制原iOS项目至
package.json同级目录
image
- 查看示例项目的Libraries列表
打开ios目录下的那个同名工程，可以看到这个工程引用的React Native库如下：
image
-
设置与示例项目相同的Libraries列表
-
打开我们原有的项目，右键工程目录，选择
New Group without Folder,新建一个名为Libraries的目录 -
然后把前面项目
Libraries下的*.xcodeproj文件全部拖到这个项目的Libraries下。
image
- 因为
Libraries中的工程已被Test项目引用，所以Demo项目不能正确引用。关闭所有项目，先打开Demo项目。
-
第三步：添加React Native shell脚本
作用：将React Native的资源文件打包放在编译目录下, 从Terminal启动了一个Node.js的server用于React Native调试
- 选择
TARGETS的Build Phases界面,点击左上角的+号
image
-
选择
New Run Script Phase添加一个脚本，并命名为Bundle React Native code and images -
把示例工程中的脚本引用代码复制过来，如下图。注意路径。
image
第四步：链接.a文件和添加搜索头文件的地址
- 在工程的
Build Phases界面的Link Binary With Libraries,点击
最下面的+号，可以看到在Workspace下多了很多.a文件，如下图，把它们全部添加进去。
image
- 接下来还需要添加
React的搜索头文件，在TARGETS -> Build Settings -> Header Search Paths中添加一条$(SRCROOT)/node_modules/react-native/React,选择recursive,如下图所示。
image
-
TARGETS -> Build Settings -> Other Linker Flags设置为-ObjC -lc++
image
第五步：在Edit Scheme的Build中添加React
- 选择
Demo Scheme执行Edit Scheme操作
image
-
Build中添加React，并拖拽到最上位置,并取消勾选Parallelize Build选项。这一步很关键,因为项目需要先编译React.a文件。
image
第六步：测试运行React Native界面
- 添加头文件
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
- 在
AppDelegate.m中的didFinishLaunchingWithOptions:方法中添加如下代码：
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
NSURL *jsCodeLocation;
jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
moduleName:@"Test"
initialProperties:nil
launchOptions:launchOptions];
rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];
self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIViewController *rootViewController = [UIViewController new];
rootViewController.view = rootView;
self.window.rootViewController = rootViewController;
[self.window makeKeyAndVisible];
return YES;
}
第七步：更新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文件，添加下面配置即可：
第八步：运行工程
-
CMD+R运行，会看到如下界面：
image
至此，原有项目集成React Native大功告成。祝在React Native的世界中玩得开心！
网友评论