React Native iOS集成说明

文章目录

1. 1. 一、模板生成
2. 2. 二、环境配置
   1. 2.1. 2.1 添加项目库
   2. 2.2. 2.2 添加配置
3. 3. 三、增加代码

本文主要是记录将React Native集成到现有项目的说明步骤及中间遇到的一些坑的记录。

一、模板生成

假如你的PC已经安装好了React Native环境，只需要在命令行执行以下命令即可以生成模板：

$react-native init RNDemo

其中RNDemo是项目名称，这里确保与你现在的项目名称一致。

生成好模板后，cd到RNDemo/ios/目录中，将该目录下的所有文件都删除，然后将现有项目所有文件复制到ios目录中。

---

二、环境配置

2.1 添加项目库

使用xcode打开现有项目，将以下库添加到项目中：

react-native/React/React.xcodeproj
react-native/Libraries/Network/RCTNetwork.xcodeproj
react-native/Libraries/Text/RCTText.xcodeproj
react-native/Libraries/WebSocket/RCTWebSocket.xcodeproj
react-native/Libraries/ActionSheetIOS/RCTActionSheet.xcodeproj

添加方法如下图所示：

在弹出的窗口的右下角点击Add Others...按钮，在弹出的窗口中选择上面相应目录下的.xcodeproj文件，将项目库包含进来。操作完成后，需要再次点击+号，将静态库都包含进来，如下图所示：

---

2.2 添加配置

如下配置如果已经配置过，则可以跳过。

1）搜索头文件地址配置
头文件搜索路径配置如下所示：

双击Header Search Path右侧区域即可显示弹出的层，双击其中的行，则进入编辑模式。

其中$(SRCROOT)为当前项目路径，可以理解为.xcodeproj文件所在的路径，../node_modules表示的是与ios同级目录的node_moduels目录。

2）启用HTTP配置
点击项目中的info.plist文件（注意是项目的plist文件，不是Tests中的），在右侧增加如下图所示的配置：

如果没有启用，运行时会提示如下错误：

App Transport Security has blocked a cleartext HTTP (http://) resource load since it is insecure. 
Temporary exceptions can be configured via your app's Info.plist file.

3）支持C++编译
添加C++编译支持如下图所示：

添加方法与上面添加Header Search Path类似。
如果没有添加-lc++，编译会报如下所示错误：

Undefined symbols for architecture x86_64:
  "std::terminate()", referenced from:
      ___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
  "operator delete[](void*)", referenced from:
      -[RCTJSCExecutor dealloc] in libReact.a(RCTJSCExecutor.o)
      executeRandomAccessModule(RCTJSCExecutor*, unsigned int, unsigned long, unsigned long) in libReact.a(RCTJSCExecutor.o)
      readRAMBundle(std::__1::unique_ptr<__sFILE, int (*)(__sFILE*)>, RandomAccessBundleData&) in libReact.a(RCTJSCExecutor.o)
      RandomAccessBundleData::~RandomAccessBundleData() in libReact.a(RCTJSCExecutor.o)
  "operator new[](unsigned long)", referenced from:
      executeRandomAccessModule(RCTJSCExecutor*, unsigned int, unsigned long, unsigned long) in libReact.a(RCTJSCExecutor.o)
      readRAMBundle(std::__1::unique_ptr<__sFILE, int (*)(__sFILE*)>, RandomAccessBundleData&) in libReact.a(RCTJSCExecutor.o)
  "___cxa_begin_catch", referenced from:
      ___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
  "___gxx_personality_v0", referenced from:
      -[RCTJavaScriptContext initWithJSContext:onThread:] in libReact.a(RCTJSCExecutor.o)
      -[RCTJavaScriptContext init] in libReact.a(RCTJSCExecutor.o)
      -[RCTJavaScriptContext invalidate] in libReact.a(RCTJSCExecutor.o)
      RCTNSErrorFromJSError(RCTJSCWrapper*, OpaqueJSContext const*, OpaqueJSValue const*) in libReact.a(RCTJSCExecutor.o)
      +[RCTJSCExecutor runRunLoopThread] in libReact.a(RCTJSCExecutor.o)
      -[RCTJSCExecutor init] in libReact.a(RCTJSCExecutor.o)
      -[RCTJSCExecutor initWithUseCustomJSCLibrary:] in libReact.a(RCTJSCExecutor.o)
      ...
ld: symbol(s) not found for architecture x86_64
clang: error: linker command failed with exit code 1 (use -v to see invocation)

如果没有添加-ObjC，运行则会报如下错误：

[error][tid:com.facebook.react.JavaScript] Native module cannot be null.
[error][tid:com.facebook.react.JavaScript] Requiring module "193", name:InitializeJavaScriptAppEngine, which threw an exception.
RNDemo[13446:1473714] -[RCTRootView reactTag]: unrecognized selector sent to instance 0x7ff670d14de0
RNDemo[13446:1473714] *** Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: '-[RCTRootView reactTag]: unrecognized selector sent to instance 0x7ff670d14de0'

可能提示的module Id不一样，导致的原因是一样的。在这里卡了很久:(。

---

三、增加代码

在已有项目的启动配置位置，如AppDelegate.m文件中增加上面没有删除的AppDelegate.m文件中的代码，如下所示：

#import "AppDelegate.h"

#import "RCTBundleURLProvider.h"
#import "RCTRootView.h"

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
  NSURL *jsCodeLocation;

  [[RCTBundleURLProvider sharedSettings] setDefaults];
  jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];

  RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                      moduleName:@"RNDemo"
                                               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;
}

@end

注意：index.ios就是模板在RNDemo目录下生成的index.ios.js文件，moduleNameRNDemo是项目的名称，这里要替换成刚开始初始化模板的命令的项目名称。

最后，按cmd + r后，会自动启动React Native服务，可以看到运行效果。