react native 之 在现有的iOS工程中集成react native

在现有的iOS工程中集成react native, 或者说将react native引入到iOS 项目，是RN和iOS混合开发的必经之路

参考官网教程：https://reactnative.cn/docs/integration-with-existing-apps/

但是会有一些步骤报错，这里记录一下。首先我的项目结构是这样：

RNTEST 是最外面的文件夹的名字，也是iOS项目的名字。ios/  下是iOS项目文件。

 

npm安装RN依赖都没问题，按照官网步骤来

最主要的是

cd ios

pod install

会报错。。。

 

 

 

错误提示是找不到XXX索引库，在Podfile文件中将这些对应的注释掉:

Podfile文件参考：https://github.com/facebook/react-native/blob/v0.60.0/template/ios/Podfile

platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'

target 'RNTEST' do
  # Pods for HelloWorld
  pod 'React', :path => '../node_modules/react-native/'
  pod 'React-Core', :path => '../node_modules/react-native'
  #pod 'React-DevSupport', :path => '../node_modules/react-native/React'
  #pod 'React-fishhook', :path => '../node_modules/react-native/Libraries/fishhook'
  pod 'React-RCTActionSheet', :path => '../node_modules/react-native/Libraries/ActionSheetIOS'
  pod 'React-RCTAnimation', :path => '../node_modules/react-native/Libraries/NativeAnimation'
  pod 'React-RCTBlob', :path => '../node_modules/react-native/Libraries/Blob'
  pod 'React-RCTImage', :path => '../node_modules/react-native/Libraries/Image'
  pod 'React-RCTLinking', :path => '../node_modules/react-native/Libraries/LinkingIOS'
  pod 'React-RCTNetwork', :path => '../node_modules/react-native/Libraries/Network'
  pod 'React-RCTSettings', :path => '../node_modules/react-native/Libraries/Settings'
  pod 'React-RCTText', :path => '../node_modules/react-native/Libraries/Text'
  pod 'React-RCTVibration', :path => '../node_modules/react-native/Libraries/Vibration'
  #pod 'React-RCTWebSocket', :path => '../node_modules/react-native/Libraries/WebSocket'

  pod 'React-cxxreact', :path => '../node_modules/react-native/ReactCommon/cxxreact'
  pod 'React-jsi', :path => '../node_modules/react-native/ReactCommon/jsi'
  pod 'React-jsiexecutor', :path => '../node_modules/react-native/ReactCommon/jsiexecutor'
  pod 'React-jsinspector', :path => '../node_modules/react-native/ReactCommon/jsinspector'
  pod 'Yoga', :path => '../node_modules/react-native/ReactCommon/yoga'

  pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
  pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
  pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'


  use_native_modules!
end

 

结果：

 

之后就是在iOS工程中写相关代码, 可以运行起来，但是在Native调RN时

然后发现又报错了，改了package.json中的版本如下：

 就可以了。

iOS项目代码参考的是慕课网上的教程。

 

要想在iOS中加载一个JSX页面，有两种方式：

一：在控制器导入头文件

//#import <React/RCTBundleURLProvider.h>
//#import <React/RCTRootView.h>
//#import <React/RCTEventEmitter.h>

然后加载JSX中注册的模块

//    NSURL *jsCodeLocation;
//
//    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//
//    RCTRootView *rootView =
//    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
//                                moduleName: @"App"
//                         initialProperties:nil
//                             launchOptions: nil];
//    self.view = rootView;

上面这个moduleName （任意取，但是要与OC中一致才能加载对应页面）就是在index.js中的这个：

import {AppRegistry} from 'react-native'
import App from './App';
import App2 from './App2';
AppRegistry.registerComponent('App1',()=>App);
AppRegistry.registerComponent('App2',()=>App2);

AppRegistry.registerComponent('App3',()=>App2);

 

二：借鉴AppDelegate中加载方式，首先导入头文件，遵循代理，实现代理方法，加载index.js中的模块

//
//  RNPageController.m
//  RNTEST
//
//  Created by LiuWei on 2019/10/18.
//  Copyright © 2019 udc. All rights reserved.
//

#import "RNPageController.h"

//#import <React/RCTBundleURLProvider.h>
//#import <React/RCTRootView.h>
//#import <React/RCTEventEmitter.h>


#import <React/RCTBridge.h>
#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>


@interface RNPageController ()<RCTBridgeDelegate>

@end

@implementation RNPageController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
//    [self initRCTRootView];

    RCTBridge *bridge = [[RCTBridge alloc] initWithDelegate:self launchOptions:nil];
    RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge
                                                     moduleName:@"App1"
                                              initialProperties:nil];
    self.view=rootView;
}

//-(void)initRCTRootView{
//    NSURL *jsCodeLocation;
//
//    jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
//
//    RCTRootView *rootView =
//    [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
//                                moduleName: @"App"
//                         initialProperties:nil
//                             launchOptions: nil];
//    self.view = rootView;
//}

- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
{
#if DEBUG
    return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else
    return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
#endif
}
@end

 

以上这种开发方式最终打包 ipa时，

 

先在ios/ 下创建一个 release_ios/

然后执行命令生成必要的jsbundle文件和图片资源文件

react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

• --platform ios：代表打包导出的平台为iOS；
• --dev false：代表关闭JS的开发者模式；
• -entry-file index.js：代表js的入口文件为index.js；
• --bundle-output：后面跟的是打包后将JS bundle包导出到的位置；
• --assets-dest：后面跟的是打包后的一些资源文件导出到的位置；

 好了之后将生成必要的jsbundle文件和图片资源文件拖进iOS项目

接下来就可以打包了

 

特别注意：如果项目用到了CodePush热更新：加载js文件的方式变成这样

...
  NSURL *jsCodeLocation;
#ifdef DEBUG     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index" fallbackResource:nil];
#else     jsCodeLocation = [CodePush bundleURL];
#endif ...

 

 

 

 

 

最后Demo地址：https://github.com/nwgdegitHub/OCCallRNDemo.git