React-Native在開發工程中也有許多實現不了的功能,這就需要藉助原生應用來實現了,React-Native實現和iOS原生互動只需要進行以下幾個步驟即可。
1、匯入RCTBridgeModule標頭檔
#import <React/RCTBridgeModule.h>
2、引入協議
#import <Foundation/Foundation.h>#import <React/RCTBridgeModule.h>@interface NativeTest : NSObject<RCTBridgeModule>@end
3、匯出模組和方法
#import "NativeTest.h"@implementation NativeTest// 匯出模組,不添加參數即預設為這個類名RCT_EXPORT_MODULE();// 匯出方法,橋接到js的方法傳回值類型必須是voidRCT_EXPORT_METHOD(doSomething:(NSString *)testStr){ NSLog(@"%@ ===> doSomething",testStr);}@end
4、在React-Native調用
// 建立原生模組 var NativeTest = require('react-native').NativeModules.NativeTest; // 方法調用 NativeTest.doSomething('zw name');
至此React-Native調用iOS原生方法的步驟就完成了。 帶有回調的方法
1、Response
#pragma mark - Response// 匯出方法,橋接到js的方法傳回值類型必須是void/* 回調參數必須為兩個,第一個為狀態,第二個為參數 */RCT_EXPORT_METHOD(doSomething:(NSString *)testStr resolver:(RCTResponseSenderBlock)callback){ NSLog(@"%@ ===> doSomething",testStr); NSString *callbackData = @"Callback資料"; //準備回調回去的資料 callback(@[[NSNull null],callbackData]);}
調用方法:
clickAction(){ // Response 調用方式 // 建立原生模組 var NativeTest = require('react-native').NativeModules.NativeTest; // 方法調用 NativeTest.doSomething(('RN->原生的資料'),(error,events) => { if (error) { console.warn(error); } else { alert(events)//返回的資料 } }); }
2、Promise
#pragma mark - Promise// 匯出方法,橋接到js的方法傳回值類型必須是void/*有兩個回調,一個為正確的,一個為error*/RCT_REMAP_METHOD(testPromisesEvent,name:(NSString *)testStr resolver:(RCTPromiseResolveBlock)resolve rejecter:(RCTPromiseRejectBlock)reject){ NSString *PromisesData = @"Promises資料"; //準備回調回去的資料 if (PromisesData) { resolve(testStr); } else { NSError *error=[NSError errorWithDomain:@"我是Promise回調錯誤資訊..." code:101 userInfo:nil]; reject(@"no_events", @"There were no events", error); }}
調用方法:
clickAction2(){ // Promise 調用方式 // 建立原生模組 var NativeTest = require('react-native').NativeModules.NativeTest; // 方法調用 NativeTest.thePromisesTest(('zw')).then((events)=>{ alert(events+1111) }); }