iOS---React Native 集成到现有项目

前言

一般我们使用 rn 集成到我们现有的项目的情况是前端给我们把 js 写好，打成一个 bundle 包，客户端通过集成 rn 到现有项目中就可以去加载这个前端已经写好的 bundle 包，这样一份代码就可以供前端，iOS 和 Android 使用。

一、 rn 初始化

1.配置好 package.json

image

• name：项目名称
• version: 版本号
• react-native : rn 的版本号，这个很重要，这个版本号一定要跟后面的资源包所使用的版本号一致，不然会出现本地rn版本号与资源包rn版本号不一致的问题。

2.初始化

• 把package.json放到该项目文件夹的一级目录下， cd 到该项目文件夹.
• 执行npm install 。 给大家附上 rn 的安装指南

二、使用 cocoapods 导入 rn 的库

platform :ios, '8.0'

target 'rntest' do
#  pod "yoga", :path => "./node_modules/react-native/ReactCommon/yoga"
  pod 'React', :path => './node_modules/react-native', :subspecs => [
  'Core',
  'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
  'RCTText',
  'RCTNetwork',
  'RCTImage',
  'RCTWebSocket', # needed for debugging
  'CxxBridge'
  # 添加你所需要的库
 ]
 pod 'DoubleConversion', podspec: './node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
 pod 'Folly', podspec: './node_modules/react-native/third-party-podspecs/Folly.podspec'
 pod 'GLog', podspec: './node_modules/react-native/third-party-podspecs/GLog.podspec'
 pod 'yoga', :path => './node_modules/react-native/ReactCommon/yoga'

end

• npm install 之后，会在该目录下生成一个叫 node_modules 的文件，一定要确认好该文件的路径，否则 pod install 会出错。
• 执行 pod install 。

PS:其实也可以直接从 node_modules 这个文件中拉取我们所需要的库到项目中，但是我们需要在 Xcode 配置一些信息，不然会编译报错，如果用 pod 去导入， pod 会帮我们配置好所有的信息，所以还是建议使用 pod 去导入。

三、导入 bundle ，使用 rn 加载 bundle 包

1. 把前端弄好的 bundle 包拉到项目中。
2. 使用 RCTRootView 就可以加载 bunlde 包的内容。

#import "ViewController.h"
#import <React/RCTRootView.h>
@interface ViewController ()
@property (nonatomic, strong)RCTRootView * rootView;
@end

@implementation ViewController

- (void)viewDidLoad {
   [super viewDidLoad];
   NSString *urlString = [[NSBundle mainBundle]pathForResource:@"ios" ofType:@"bundle"];
   NSURL *jsCodeLocation = [NSURL fileURLWithPath:urlString];
   
   self.rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"kiwi-react-native" initialProperties:nil launchOptions:nil];
   
   self.rootView.frame = CGRectMake(0, 22, self.view.frame.size.width, self.view.frame.size.height - 22);
   [self.view addSubview:self.rootView];
}


- (void)didReceiveMemoryWarning {
   [super didReceiveMemoryWarning];
   // Dispose of any resources that can be recreated.
}


@end

<br />

• 注意 ：[[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"kiwi-react-native" initialProperties:nil launchOptions:nil]; 中的 moduleName 不是指项目名，这是指的是 bundle 包中 index.js 组件注册的名称。
  image