> For the complete documentation index, see [llms.txt](https://twins-bamboo.gitbook.io/react-native-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://twins-bamboo.gitbook.io/react-native-note/basic-ii/native-module-android.md).

# Native Module - Android

部分的code請參考圖片內容

### 新建

1.在專案內新建一個HelloWorld.java

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

2.我們還需要建構Package檔案包裝此模組，讓我們可以在建置中加以引用。它也應該與HelloWorld.java放在一起。

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

3.必須在MainApplication.java => getPackages()中加入套件。

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

\
4.在RN專案內要使用的.js中：

```
//.js檔案內 最上方做import的動作
import { NativeModules } from 'react-native';
var HelloWorld = NativeModules.HelloWorld;

//在要call此function的地方使用下方的code
HelloWorld.greeting('Bonnie’);
```

#### &#x20;<a href="#callback" id="callback"></a>

### callback

1.new Module (最下方有附code）

* 1\) 在src/main/java/..../新建 .java檔案 - extends ReactContextBaseJavaModule @Override getName方法 - return the string name of the NativeModule which represents this class in JavaScript
* 2\) @ReactMethod function，function內需帶入callback參數 使用callback.invoke()回傳值，可帶入多個參數 ps.To expose a method to JavaScript a Java method must be annotated using @ReactMethod. The return type of bridge methods is always void.

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

2.Register the Module (最下方有附code）

* 1\)在src/main/java/..../新建 packager.java檔案 - implements ReactPackage

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

3.在MainApplication.java 中 getPackages方法中 提供此package The path to this file is: android/app/src/main/java/com/your-app-name/MainApplication.java

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

\
4.在RN專案內要使用的.js中

```
//此.js檔案內上方做import和宣告等動作
import{
    NativeModules,
} from 'react-native';
var AllPayPassMethod = NativeModules.AllPayPassMethod;

//在要使用該方法的地方，使用以下的code來實作該方法
  AllPayPassMethod.bridgeTest("hello”);
  AllPayPassMethod.encryptMap(json,
      (errMsg) => {
        console.warn(errMsg);
      },
      (SuccessMsg) => {
        console.log(SuccessMsg);
        this.post(SuccessMsg);
      });
```

### 附上

* [AllPayPassMethod.java](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/AllPayPassMethod.java)
* [AllPayPassMethodPackage.java](https://bambooooo.gitbooks.io/react-native/content/React%20Native/article/basic/file/AllPayPassMethodPackage.java)

### &#x20;參考

* [Native Modules](https://facebook.github.io/react-native/docs/native-modules-android.html) from React Native官網
* [RN+Android原生組件開發 包含原生UI](https://github.com/crazycodeboy/RNStudyNotes/blob/master/React%20Native%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91/RN%2BAndroid%20%E5%8E%9F%E7%94%9F%E7%BB%84%E4%BB%B6%E5%BC%80%E5%8F%91.md) from crazycodeboy's github


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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-android.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.
