# 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)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://twins-bamboo.gitbook.io/react-native-note/basic-ii/native-module-ios.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.