Native Module - iOS

Object-c 類別通常具有一個以 .h 作為副檔名的檔頭檔案，它帶有類別的界面。實際的實作放在 .m 檔案中。

以下直接附上實作 打印一個Log 的步驟跟code

請直接使用Xcode操作以下內容

新建 /ios/HelloWorld.h

//匯入RCTBridgeModule標頭
#import <React/RCTBridgeModule.h>
//宣告HelloWorld類別是NSObject的子類別並實作RCTBridgeModule界面，以@end結束界面得宣告。
@interface HelloWorld : NSObject <RCTBridgeModule>
@end

點此查完整 HelloWorld.h

新建 /ios/HelloWorld.m

#import "HelloWorld.h"
#import "RCTLog.h"

//@implementation 與 @end 行表示於之間的內容是HelloWorld的類別實作。
@implementation HelloWorld
//叫用RN的巨集已讓此類別可被RN存取。
// To export a module named HelloWorld
RCT_EXPORT_MODULE();
//同樣的，greeting:name的方法定義也已RCT_EXPORT_METHOD巨集前綴，他匯出此方法已顯露給我們的js程式。
//每個參數名稱包含在方法名稱中。
//以Object-C名稱到冒號之前作為js名稱 是ＲＮ的傳桶，因此greeting:name在js中變成greeting。
RCT_EXPORT_METHOD(greeting:(NSString *)name)    
{    
  RCTLogInfo(@"Saluton, %@", name);
}    
@end

點此查完整 HelloWorld.m

在要使用的.js中

import { NativeModules } from 'react-native';
var HelloWorld  = NativeModules.HelloWorld;
// 上方兩行後可使用，或作為一個.js檔 並用下方的code做使用

//在某個地方call下方的發法做使用
HelloWorld.greeting('Bonnie');

或者可以將 import NativeModules拉出去寫成一個.js，再import此.js做使用，方法如下

在要使用的.js中，另外HelloWorld.js點此參考

//import .HelloWorld  使用HelloWorld
import HelloWorld from './HelloWorld';

//在某個地方call下方的發法做使用
HelloWorld.greeting('Bonnie');

若上面步驟都不是在Xcode內開發的，那要將HelloWorld.h & .m 檔案 Add Files to "你的專案"裡面。 如下圖

回顧一下，Object-C模組必須下事情已用於ＲＮ： * 匯入RCTBridgeModule標頭 * 宣告你的模組有實作RCTBridgeModule 界面 * 呼叫RCT_EXPORT_MODULE()巨集 * 以RCT_EXPORT_METHOD巨集匯出至少一個方法 * 將.h & .m檔案用Xcode加入專案內 若Run不過，請見本文最下方的附註

callback

回傳字串的簡單sample code

在HelloWorld.m內 加入以下code

RCT_EXPORT_METHOD(test:(NSString*)name
              callback:(RCTResponseSenderBlock)callback)
{
     RCTLogInfo(@"Come from allpaylib's msg: %@", name);
     callback(@[[NSNull null], msg]);
}

在要使用的.js內加入以下code，就ok了～

 HelloWorld.test('hello send from rn.. test()', (error, events) => {
      if (error) {
        console.warn(error);
      } else {
        console.warn(events);
      }
 });

ps. callback(@[參數,參數]); 附上RN的JS Code

iOS的Code

附註 1.請確定mac os & Xcode的版本已經最新板... （遇到莫名錯誤修不好，更新OS＆Xcode後OK)

2.使用Xcode Run(不知道為什麼react-native run-iso，會沒show log…）

3.附上Xcode內的位置 ＆ 在RN資料夾內的位置 請注意！.m檔案 在右方 Target Membership有選擇 ，.h則無

PreviousFetchNextNative Module - Android

Last updated