前言
一般我们使用 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 包
- 把前端弄好的 bundle 包拉到项目中。
- 使用
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
