> 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