iOS原生接入CRN步骤

一、安装ReactNative及code-push

1.安装rn项目依赖

新建文件夹foldername，在foldername下clone健客医院iOS项目及健客医院RN项目目录结构如下：

命令行进入RN项目根目录，执行npm install，安装node依赖模块。

2.安装iOS项目依赖

进入iOS项目文件夹，编辑Podfile文件，添加RN及code-push依赖：

# RN相关
    pod 'React', :path => '../DoctorBonusPoints/node_modules/react-native', :subspecs => [
        'Core',
        'CxxBridge',
        'RCTImage',
        'DevSupport',
        'RCTText',
        'RCTNetwork',
        'RCTWebSocket',
        'RCTActionSheet',
        'RCTLinkingIOS',
        'RCTAnimation'
    ]
    pod 'CodePush', :path => '../DoctorBonusPoints/node_modules/react-native-code-push'
    pod 'RNGestureHandler', :path => '../DoctorBonusPoints/node_modules/react-native-gesture-handler'
    pod 'yoga', :path => '../DoctorBonusPoints/node_modules/react-native/ReactCommon/yoga'
    pod 'DoubleConversion', :podspec => '../DoctorBonusPoints/node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
    pod 'glog', :podspec => '../DoctorBonusPoints/node_modules/react-native/third-party-podspecs/glog.podspec'
    pod 'Folly', :podspec => '../DoctorBonusPoints/node_modules/react-native/third-party-podspecs/Folly.podspec'

打开命令行，在iOS项目根目录下执行pod install，安装成功后。打开iOS项目，手动删除Pods target下的Development Pods文件夹内的React文件夹，也就是删除刚刚安装的RN的依赖库。去github下载CRN开源项目，下载成功后解压，文件结构如下：

将CRN文件夹和ReactNative文件夹拷贝到健客医院项目的JianKeDoctor目录下。打开健客医院iOS项目添加文件夹下子工程依赖如图所示：

点击xode 左上角项目target，选择 edit scheme如图所示，点击build选项卡，点击加号添加React编译依赖，取消勾选parallelize选项，注意要把React放在最上边使之先编译。

进入工程的buildphases添加library

点击build settings选项卡，找到Header Search Paths选项，添加搜索路径

1 2	${SRCROOT}/JianKeDoctor/RNLib/ReactNative ${SRCROOT}/JianKeDoctor/CRN

搜索路径都设置为recursive，递归查找。

到此安装工作结束。

二、RN项目打包

打开命令行，输入 sudo npm install crn-cli -g ，全局安装CRN命令行工具。

打开健客医院RN工程，编辑index.js文件，加入模块导出代码如下：

import {AppRegistry} from 'react-native';
import {name as appName} from './app.json';
import App from './src/App'
AppRegistry.registerComponent(appName, () => App);
//勿删除，打包需要业务模块导出
module.exports = App;

在项目根目录下执行 crn-cli pack 进行打包，打包产物为publish文件夹下的内容，包目录结构如下：

删除安卓平台包，将publish文件夹重命名为webapp，将webapp文件夹拷贝到健客医院iOS项目的JianKeDoctor文件夹内,在项目里add file，选择create folder reference，就是在工程里显示为蓝色文件夹如图：

三、使用规则

在AppDelegate.m中引入JKCRNLauncher.h，项目启动时调用[JKCRNLauncher launch];，CRN初始化工作结束

使用方式：

引入JKCRNViewController.h头文件，在需要跳转的地方初始化并配置，示例代码如下：

#import "CRNURLHandler.h"
#import "JKCRNViewController.h"
#import <CodePush.h>
#import "JKRNExceptionManager.h"
@interface JKMineController ()<UITableViewDataSource,UITableViewDelegate,JKRNExceptionManagerDelegate>
@end
- (void)viewDidLoad {
    [JKRNExceptionManager sharedManager].delegate = self;
}
//js内部出错代理
-(void)jsInternalExceptionHandler:(NSError *)jsError{
    [self goToNativeEvaluateVC];
}
//js包加载失败代理
-(void)jsBundleLoadFailedHandler:(NSDictionary *)info{//js包加载失败
    [self goToNativeEvaluateVC];
}
-(void)goTOCRN{
#ifdef DEBUG
        NSString * strUrl = @"http://192.168.36.71:8081/index.bundle?CRNModuleName=CRNJiankeDoctor&CRNType=1&platform=ios&dev=true";
//////        NSString * strUrl = @"http://192.168.36.71:8081/index.bundle?platform=ios&dev=true&CRNModuleName=jsts&CRNType=1";
#else
        NSURL *jsCodeLocation = [CodePush bundleURL];
        NSString *strUrl = [jsCodeLocation.absoluteString stringByAppendingString:@"/rn_CRNJiankeDoctor/main.js?CRNModuleName=CRNJiankeDoctor&CRNType=1"];
#endif
        CRNURL *url = [[CRNURL alloc] initWithPath:strUrl];
        JKCRNViewController *crnVC = [[JKCRNViewController alloc]initWithURL:url andInitialProperties:@{@"moduleName":@"EvaluationDetails",@"nativeInfo":[NativeInfoGetter getNativeInfoJson]}];
        crnVC.title = url.rnTitle;
        [self.navigationController pushViewController:crnVC animated:YES];
}

四、code-push使用

服务环境配置

正式环境用 https://bj-client.jianke.com/codePush/ Production

预发布环境用 https://bj-client.jianke.com/codePush/ Staging

其他用 http://192.168.36.143:3000 Staging

iOS端代码推送

将RN项目打包产物剔除平台相关代码后，目录结构如图所示：

发布代码命令如下：

1	code-push release JiankeDoctor-iOS ./webapp 1.0.0 --deploymentName Staging --m false

JiankeDoctor-iOS为code-push项目名称，./webapp为发布的代码目录，1.0.0为iOS项目内，info.plist 中CodePushVersion字段对应值，–m 参数为是否强制更新。

注意❗️

对于不同环境的code-push配置，要注意修改infoplist文件的CodePushServerURL和CodePushDeploymentKey的值，以及CodePushVersion的

key值
Production: tGGtLkVShHGHGlAStMXCBaw2ofvb4ksvOXqog

Staging: lb2YGzqszSd5TiVm78ZAKhLLF5Jh4ksvOXqog

2019-08-27