从零开始，为Android创建一个最简单的React Native Module

关于如何桥接native code，React Native的官网并没有多少篇幅介绍。通过Google和StackOverflow，收集了一些资料。这里分享下如何为Android写一个最简单，最干净的React Native Module。

准备工作

Android Studio
React Native CLI:

npm install -g react-native-cli

 

最简单的Native Module

工程的基本结构如下：

--Project folder

--package.json

--android // a folder that contains Java code for native module

--index.js

Package.json

创建一个工程目录react-native-helloworld。使用npm来初始化：

cd react-native-helloworld
npm init

自动生成package.json文件。

Android目录

Android目录里放置Android工程代码。结构如下：



包含build.gradle，AndroidManifest.xml，以及Java代码。

MyModule继承ReactContextBaseJavaModule，主要实现JavaScript需要调用的接口：

package com.yushulx.helloworld;

import android.widget.Toast;

import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;

public class MyModule extends ReactContextBaseJavaModule {

public MyModule(ReactApplicationContext reactContext) {
super(reactContext);
}

@Override
public String getName() {
return "MyModule";
}

@ReactMethod
public void alert(String message) {
Toast.makeText(getReactApplicationContext(), message, Toast.LENGTH_LONG).show();
}
}

注意getName中返回的string值和类名必须相同。

MyPackage用于注册模块：

package com.yushulx.helloworld;

import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.JavaScriptModule;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;

import java.util.ArrayList;
import java.util.Collections;
import java.util.List;

public class MyPackage implements ReactPackage {

@Override
public List<Class<? extends JavaScriptModule>> createJSModules() {
return Collections.emptyList();
}

@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}

@Override
public List<NativeModule> createNativeModules(
ReactApplicationContext reactContext) {
List<NativeModule> modules = new ArrayList<>();

modules.add(new MyModule(reactContext));

return modules;
}

}

Index.js

这个文件主要用于导出native module，方便UI层的JavaScript调用：

import {NativeModules} from 'react-native';
module.exports = NativeModules.MyModule;

如何在React Native工程中使用Native Module

可以在模块工程目录下创建一个新的工程：<
cde0
/p>

react-native init Example

如何安装这个本地磁盘上的插件？只需要把插件目录的路径写到package.json中，然后通过npm install安装即可：

"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-native-helloworld":"file:../"
},

通过命令行自动添加关联代码：

react-native link

这行命令会修改几个文件。

android\settings.gradle

include ':react-native-helloworld'
project(':react-native-helloworld').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-helloworld/android')

 

android\app\build.gradle

dependencies {
compile project(':react-native-helloworld')
}

 

android\app\src\main\java\com\example\MainApplication.java

import com.yushulx.helloworld.MyPackage;
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new MyPackage()
);
}

 

在index.android.js中使用native module：

import MyModule from 'react-native-helloworld';

const onButtonPress = () => {
MyModule.alert('Hello World');
};

export default class Example extends Component {
render() {
return (
<View style={styles.container}>
<Button title='Click' onPress={onButtonPress}/>
</View>
);
}
}

运行程序：

源码

https://github.com/yushulx/react-native-helloworld