iOS原生项目集成React Native模块

今天周末,弄弄Native和React Native之间的交互.首先,先在iOS原生项目中集成React Native模块:

注意事项:  

1.因为react native的版本问题,部分细节可能有所不同,这里只介绍本猿的环境版本.

2.名称的一致性

1.首先,使用终端命令新建一个React Native项目待用;新建一个文件夹ReactComponent,把刚才新建的React Native项目中的index.ios.js和package.json和node_modules文件夹及其下属文件全都拖进文件夹ReactComponent.如:

                                                         图1

2.使用Xcode新建一个工程,把刚才的文件夹ReactComponent直接拖入到项目根目录下,简单粗暴.如图1.

3.使用cocoapods导入一些必须的库,其中Podfile中如下所示,接着pod install导入下面的库:

platform :ios, "8.0"
use_frameworks!
target "XXXXXXXX" do
# 取决于你的工程如何组织，你的node_modules文件夹可能会在别的地方。
# 请将:path后面的内容修改为正确的路径（一定要确保正确～～）。
pod 'React', :path => './ReactComponent/node_modules/react-native', :subspecs => [
'Core',
'RCTActionSheet',
'RCTGeolocation',
'RCTImage',
'RCTNetwork',
'RCTPushNotification',
'RCTSettings',
'RCTText',
'RCTVibration',
'RCTWebSocket'
]
end

成功如图:

4.使用Xcode打开项目:先新建一对RNViewController文件作为承载react native界面,其中,RNViewController.m如下所示:

//
//  RNViewController.m
//  NativeAddRN
//
//  Created by Shaoting Zhou on 2017/2/10.
//  Copyright © 2017年 9elephas. All rights reserved.
//

#import "RNViewController.h"
#import <React/RCTRootView.h>

@interface RNViewController ()

@end

@implementation RNViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    
    NSString * strUrl = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    NSURL * jsCodeLocation = [NSURL URLWithString:strUrl];
    
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation
                                                         moduleName:@"NativeAddRN"
                                                  initialProperties:nil
                                                      launchOptions:nil];
    self.view = rootView;
    // Do any additional setup after loading the view.
}

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

/*
#pragma mark - Navigation

// In a storyboard-based application, you will often want to do a little preparation before navigation
- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender {
    // Get the new view controller using [segue destinationViewController].
    // Pass the selected object to the new view controller.
}
*/

@end

5.在Main.storyboard中新建一个Navigation Controller作为根,一个新的UIViewController绑定4中新建的RNViewController.再加上自带的UiViewController三者互相关联一下.如图:

最后,终端  cd  ReactComponent文件夹下,  npm start 启动服务即可.

效果如图:

 

 demo源码下载: https://github.com/pheromone/IOS-native-and-React-native-interaction