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