RN2iOSNative

前言

最近在寫RN的項目的時候發現有個別頁面,實在無法用RN來實現就,迫不得已之下就想必須要使用iOS的原生頁面了!在使用原生也頁面的時候遇到很多問題,發現都是各種姿勢不對(姿勢很重要)就在摸索的中,休息時突然得到了上帝佛主觀音的提示完成了這偉事情!(廢話說完入正題)!

總結之前為什么跳轉失敗的原因

沒有拿到navigation
沒有拿到navigation
沒有拿到navigation

一.配置OC關鍵代碼

1.在XCode 中的AppDelegate.h 添加 UINavigationController控件.
(這里為什么要添加 UINavigationController 因為在原生的頁面跳轉是需要 UINavigationController 的控制,或者說大部分跳轉不過去是因為在iOS原生頁面沒有 UINavigationController 沒有Navigation又怎么能今天頁面的跳轉呢?)

@interface AppDelegate : UIResponder <UIApplicationDelegate>

@property (nonatomic, strong) UIWindow *window;
//關鍵代碼
@property (nonatomic, strong) UINavigationController *nav;

@end

2.在.m文件中讓 rootViewController 接受navigation的管理

//關鍵代碼
  _nav=[[UINavigationController alloc]initWithRootViewController:rootViewController];
  _nav.navigationBarHidden = YES;
  
  self.window.rootViewController = _nav;

  [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(doNotification:) name:@"RNOpenVC" object:nil];

-(void)doNotification:(NSNotification *)notification
{
  NSLog(@"成功收到===>通知");
  //將通知里面的userInfo取出來，使用
  [self.nav pushViewControlle:" 你要跳轉的頁面" animated:YES];
   //注意不能在這里移除通知否則pus進去后有pop失效
  
}

3.新建 RCTBridgeModule 類 繼承 NSObject 封裝一個方法使用通知進行消息的傳送從而實現頁面的跳轉
這里為什么這樣寫包含了很多RN與OC之間的通信如果大家想知道可以去江清清老師的博客看看我就不在這里敘述了

.h文件

#import <Foundation/Foundation.h>
#import "RCTBridgeModule.h"
@interface RNBridgeModule : NSObject<RCTBridgeModule>

@end

.m文件

#import "RNBridgeModule.h"
#import "RCTBridge.h"

@implementation RNBridgeModule
@synthesize bridge = _bridge;

RCT_EXPORT_MODULE(RNBridgeModule)
//RN跳轉原生界面
RCT_EXPORT_METHOD(RNOpenVC:(NSString *)msg){
  
  NSLog(@"RN傳入原生界面的數據為:%@",msg);
//主要這里必須使用主線程發送,不然有可能失效
  dispatch_async(dispatch_get_main_queue(), ^{
    [[NSNotificationCenter defaultCenter]postNotificationName:@"RNOpenVC" object:nil];
  });
}
@end

到目前為止Xcode就配置完成

二.配置RN

1.打開index.ios.js
添加對oc代碼的引用

//關鍵代碼
var {
  NativeModules
} = require('react-native');
var RNBridgeModule = NativeModules.RNBridgeModule;

2.調用方法

//關鍵代碼
  <CustomButton text='React Native調用訪問iOS'
            onPress={()=>RNBridgeModule.RNOpenVC('測試')}
        />

大概思路就是這樣!
如果大家還有說不懂我就直接去github下載 我的項目來看看RN2iOSNative如果大家覺得有幫助給個??Star?Star?Star??

運行

$ git clone https://github.com/JasonStu/RN2iOSNative.git
$ cd RN2iOSNative
$ npm install
$ react-native run-ios