# Native Module - iOS

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

{% hint style="danger" %}
請直接使用Xcode操作以下內容
{% endhint %}

### 新建 /ios/HelloWorld.h

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

[點此查完整 HelloWorld.h](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/HelloWorld_h.md)

\
新建 /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](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/HelloWorld_m.md)

\
在要使用的.js中

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

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

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

在要使用的.js中，另外[HelloWorld.js點此參考](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/HelloWorld_js.md)

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

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

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

![](https://703864731-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LGT_WSMJJJ-6nRhUva4%2F-LGyzjfPTh7CefMunHP3%2F-LGz1ox-_OS9HKGbBXps%2FnativeModuleiOS.png?alt=media\&token=a6cc26d6-0528-40d4-bded-9e98f2f46aaa)

回顧一下，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

* [index.js](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/ios-index.js)

iOS的Code

* [HelloWorld.h](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/ios-HelloWorld.h)
* [HelloWorld.m](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/ios-HelloWorld.m)

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

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

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

![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/basic/nativeModule/ios-1.png)

![](https://bambooooo.gitbooks.io/react-native/content/React%20Native/images/basic/nativeModule/ios-2.png)