一步步教你如何创建React Native的原生Android模块
16lz
2021-01-25
在查阅了官方文档以及大量的翻译还有各种转载文章之后,对RN创建Android原生模块还是云里雾里。
这不在多次实验之后,终于悟通其中的关键,其实非常的简单,这里我进行一个记录提供给各位需要的朋友。
初始化项目
这里就不多说了,我们进行项目初始化完毕后,用Android Studio打开项目中的android
目录下的build.gradle
文件。如图:
创建Module
步骤:
- 右键
app/java/com.projectName
,新建Java Class
- 新建的类继承
ReactContextBaseJavaModule
,然后补充实现方法(善于利用代码提示与补全 - 新建一个
@ReactMethod
方法,用于测试
** 不想太啰嗦,直接录制成了gif给各位看官:**
创建Module示例代码
package com.mynative;import android.util.Log;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;public class MyModule extends ReactContextBaseJavaModule { public MyModule(ReactApplicationContext reactContext) { super(reactContext); } // 这里返回一个模块名称字符串,便于我们在 js中调用 @Override public String getName() { return "MyModule"; } // 创建一个方法 @ReactMethod public void hi(String name) { Log.v("ReactNativeJS", name); }}
创建Package
方法同上,我们新建一个名为MyPackage
的Java Class
,然后利用代码补全与提示把剩下的方法加上,如图:
示例代码
package com.mynative;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 createNativeModules(ReactApplicationContext reactContext) { List modules = new ArrayList<>(); modules.add(new MyModule(reactContext)); return modules; } @Override public List> createJSModules() { return Collections.emptyList(); } @Override public List createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); }}
注册模块
到此,我们的模块已经创建完毕,下一步直接在MainApplication
中注册即可使用了:
调用模块
原生代码编写完毕后,需要重新打包部署app,然后我们在js代码中这么屌用:
import { NativeModules } from 'react-native';const myModule = NativeModules.MyModule; // 这里的MyModule为我们上边getName函数返回的name// 调用方法myModule.hi('react-native!');
总结
这里很多详细的地方没写,因为我觉得没必要,在文档以及其他人的翻译文章中都有说明了。
这里主要就是讲解一些困惑点,比如怎么创建模块、怎么自动填写类方法等。
更多相关文章
- 没有一行代码,「2020 新冠肺炎记忆」这个项目却登上了 GitHub 中
- android 定时任务 Alarm机制
- 安卓 SQLite数据库操作实例
- Android(安卓)Studio 快捷键 for Mac OS X
- Git diff代码比较的高级技巧
- webview的详解
- Android第三方log库——Logger
- Android(安卓)逐帧动画
- android用户界面编程技巧――如何使用Adapter