React Native 与 App 集成方案

一、前言

Facebook提供了“Integrating with Existing Apps”方案，但是需要使用pod install, 会出现版本更新不及时。那么如何手动集成到Native代码中去呢？这里提供一个简单的Demo供参考。

二、构建步骤

  1. 1. 创建 React Native项目，目的是获取最新的React Native包
  2. $ react-native init test     
  3. 2. 创建 Native项目，例如ReactTest
  4. 3. 将test/node_modules拷贝到ReactTest根目录下
  5. 4. 在ReactTest项目中创建Group：Libraries
  6. 5. 在Group：Libraries中添加依赖的React Native项目：
  7.     /node_modules/react-native/React/React.xcodeproj
  8.     /node_modules/react-native/Libraries/Text/RCTText.xcodeproj
  9.     /node_modules/react-native/Libraries/WebSocket/RCT WebSocket.xcodeproj       
  11. 添加完成如下图

lesson9：React Native 与 App 集成方案 - 图1 

  1. 6. Build Rules中添加静态库文件，如下图

lesson9：React Native 与 App 集成方案 - 图2 

  1. 7.添加依赖循环    
  2. $(SRCROOT)/node_modules/react-native/React
  3. 如下图所示：

lesson9：React Native 与 App 集成方案 - 图3

8.修改AppDelegate.m应用启动代码 

  1. #import "AppDelegate.h"
  2. #import "ViewController.h"
  4. @interface AppDelegate ()
  5. @end
  7. @implementation AppDelegate
  10. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  11.     if(!self.window){
  12.         self.window = [[UIWindow alloc]init];
  13.     }
  15.     self.window.frame = [[UIScreen mainScreen]bounds];
  16.     self.window.backgroundColor = [UIColor whiteColor];
  17.     self.window.rootViewController = [ViewController new];
  18.     [self.window makeKeyAndVisible];
  19.     return YES;
  20. }

9.在ViewController.m中调用React Native和Native混编 

  1. #import "ViewController.h"
  2. #import "RCTRootView.h"
  4. @interface ViewController ()
  6. @end
  8. @implementation ViewController
  10. - (void)viewDidLoad {
  11.     [super viewDidLoad];
  12.     UIButton *searchBtn = [[UIButton alloc]init];
  13.     searchBtn.frame = CGRectMake(0 + 5, 0, 100, 100);
  14.     searchBtn.backgroundColor = [UIColor colorWithRed:0.000 green:0.569 blue:1.000 alpha:1];
  15.     [searchBtn setTitle:@"搜索" forState:UIControlStateNormal];
  16.     [searchBtn setTitle:@"搜索" forState:UIControlStateHighlighted];
  18.     NSURL *jsCodeLocation;
  19.     jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios&dev=true"];
  20.     RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
  21.                                                         moduleName:@"Study"
  22.                                                  initialProperties:nil
  23.                                                      launchOptions:nil];
  24.     rootView.frame = [[UIScreen mainScreen]bounds];
  25.     [self.view addSubview:rootView];
  26.     [self.view addSubview:searchBtn];
  29. }
  31. - (void)didReceiveMemoryWarning {
  32.     [super didReceiveMemoryWarning];
  33.     // Dispose of any resources that can be recreated.
  34. }
  36. @end

10.还需要设置下Other Linker Flags, 如下图

lesson9：React Native 与 App 集成方案 - 图4 

  1.    11. OK 享受编程吧