RN 与 Android 代码交互

如果在开发中要用到一个 RN 没有提供的组件，或者想复用 Java 代码已经实现的组件而不是用 JavaScript 再造一个车轮子，或者想使用 Java 高效的处理图片、访问数据库、多线程编程等，你可以使用 RN 做到 JavaScript 与 Java 异步通信。

这里我们以 Android 提供的 Toast 为例。在 RN 工程里使用 JavaScript 调用 Android 系统的 Toast。

首先来看一下工程目录结构：

如上图，我们的工程叫 Awesome。左侧的是 Atom 工程，右侧的是将其中的 android/app 目录导入 Android Studio 后的工程。
Java 文件包括：

MainActivity.java;
AwesomeReactPackage.java;
ToastModule.java，RN 已经提供了该文件，实际开发过程中直接引用即可，本文为了学习需要单独写出；

JavaScript 文件包括：

index.android.js;
ToastAndroid.js。

文件内容分别如下：
MainActivity

public class MainActivity extends Activity implements DefaultHardwareBackBtnHandler {private ReactInstanceManager mReactInstanceManager;private ReactRootView mReactRootView;@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);mReactRootView = new ReactRootView(this);mReactInstanceManager = ReactInstanceManager.builder().setApplication(getApplication()).setBundleAssetName("index.android.bundle").setJSMainModuleName("index.android").addPackage(new MainReactPackage()).setUseDeveloperSupport(BuildConfig.DEBUG).setInitialLifecycleState(LifecycleState.RESUMED).build();mReactRootView.startReactApplication(mReactInstanceManager, "Awesome", null);setContentView(mReactRootView);}@Overridepublic boolean onKeyUp(int keyCode, KeyEvent event) {if (keyCode == KeyEvent.KEYCODE_MENU && mReactInstanceManager != null) {mReactInstanceManager.showDevOptionsDialog();return true;}return super.onKeyUp(keyCode, event);}@Overridepublic void onBackPressed() {if (mReactInstanceManager != null) {mReactInstanceManager.onBackPressed();} else {super.onBackPressed();}}@Overridepublic void invokeDefaultOnBackPressed() {super.onBackPressed();}@Overrideprotected void onPause() {super.onPause();if (mReactInstanceManager != null) {mReactInstanceManager.onPause();}}@Overrideprotected void onResume() {super.onResume();if (mReactInstanceManager != null) {mReactInstanceManager.onResume(this, this);}}protected List<ReactPackage> getPackages() {return Arrays.<ReactPackage>asList(new MainReactPackage(),new AwesomeReactPackage());}
}

ToastModule

public class ToastModule extends ReactContextBaseJavaModule {private static final String DURATION_SHORT_KEY = "SHORT";private static final String DURATION_LONG_KEY = "LONG";public ToastModule(ReactApplicationContext reactContext) {super(reactContext);}@Overridepublic String getName() {return "ToastAndroid";}@Overridepublic Map<String, Object> getConstants() {final Map<String, Object> constants = new HashMap<>();constants.put(DURATION_SHORT_KEY, Toast.LENGTH_SHORT);constants.put(DURATION_LONG_KEY, Toast.LENGTH_LONG);return constants;}@ReactMethodpublic void show(String message, int duration) {Toast.makeText(getReactApplicationContext(), message, duration).show();}
}

AwesomeReactPackage

public class AwesomeReactPackage implements ReactPackage {@Overridepublic List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {List<NativeModule> modules = new ArrayList<>();modules.add(new ToastModule(reactContext));return modules;}@Overridepublic List<Class<? extends JavaScriptModule>> createJSModules() {return null;}@Overridepublic List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {return null;}
}

ToastAndroid

var { NativeModules } = require('react-native');
module.exports = NativeModules.ToastAndroid;

在 index.android.js 中使用 ToastAndroid：

var ToastAndroid = require('./ToastAndroid');
ToastAndroid.show('Awesome', ToastAndroid.LONG);

下面讲解各个文件的作用。

RN 与 Android 代码交互相关推荐

ReactNative开发——RN与android Native交互初探
ReactNative开发--RN与android Native交互初探环境 window10,reactnative 0.44版 RN调用android方法 1.导入NativeModules组件 ...
RN与Android的交互
Android端接口 RN端向Android侧通信可以通过Android侧的接口来实现. 实现接口 Android侧的接口都需要继承ReactContextBaseJavaModule类,如下: cl ...
RN 与android原生交互
缘由有时候App需要访问平台api,但在RN中没有相应的模块,或者需要你复用一些原生代码,这就需要进一步开发RN原生模块.一般用React Native开发App时会用到一些原生模块,比如:在做社会 ...
RN与Android原生交互
前言:最开始做RN开发的时候,没有和原生打交道,结果居然把项目做出来,后来有人问我,RN页面可以跳转到Activity页面吗?我蒙了,我想了一下为什么还要调到原生页面呢?那样就不兼容andoid和io ...
rn+android+sdk,RN与Android原生交互
场景:在RN界面中需要调用原生的拍照和选择相册功能,将拍照或者选择的照片的路径回传给RN 步骤如下: 1.RN的界面跳转到原生Activity,并接收从原生回传的数据 import React, { ...
rn+与android+交互,React native 与Android原生交互方式(一)
前言## 最近在做React Native开发的时候避免不了的需要原生模块和JS之间进行交互,其实RN和原生的通信大致分为两种情况:一种是Android主动向RN端发送事件和数据,另外一种是RN端被动 ...
android和js交互的代码,Android与JS代码交互
现如今,很多Android APP都要与JS进行交互,而WebView就是Android与JS交互的桥梁,日常中最常见Android和JS交互有:APP注册协议,APP里的文章,APP里的活动页,这都 ...
Android 与 JS 的交互以及 JS与Android 的交互
Android与JS交互以及JS与Android 的交互是通过WebView互相调用方法对于Android调用JS代码的方法有2种: 通过WebView的loadUrl() 通过WebView的e ...
编写高效的Android代码
编写高效的Android代码转自:http://www.chinaup.org/docs/toolbox/performance.html 介绍对于如何判断一个系统的不合理,这里有两个基本的原则: ...

RN 与 Android 代码交互

RN 与 Android 代码交互相关推荐

最新文章

热门文章