内容简介:我们在使用RN的时候,会发现RN提供了很多Module供JS调用,这些Module能够满足我们一些基础的应用场景,但是在实际的项目中,必定会有一些交互逻辑需要我们自己去实现,这时候就需要我们自定义一些Module供JS调用,那么怎么才能让JS调用到我们自定义的Module呢? 下面我们就一步步的去实现JS对自定义Module的调用。到此我们就实现了JS调用我们自定义Module的所有工作,例子比较简单大家可以自己根据上述步骤一步步操作,相信在创建的过程中会有自己的体会和收获。其间有什么建议或疑问欢迎和我们
我们在使用RN的时候,会发现RN提供了很多Module供JS调用,这些Module能够满足我们一些基础的应用场景,但是在实际的项目中,必定会有一些交互逻辑需要我们自己去实现,这时候就需要我们自定义一些Module供JS调用,那么怎么才能让JS调用到我们自定义的Module呢? 下面我们就一步步的去实现JS对自定义Module的调用。
实现方法
1、在原生端创建ReactUiModule类:
public class ReactUiModule extends ReactContextBaseJavaModule { public ReactUiModule(ReactApplicationContext reactContext) { super(reactContext); } @Override public String getName() { return "ReactUiModule"; } //toast @ReactMethod public void showToast(String msg) { Toast.makeText(getReactApplicationContext(), msg, Toast.LENGTH_LONG); } } 复制代码
2、创建ReactPackage类并在该类中添加我们自定义的Module:
public class MyReactPackage implements ReactPackage { @Override public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) { List<NativeModule> nativeModules = new ArrayList<>(); /*在这里加入开发的接口*/ nativeModules.add(new ReactUiModule(reactContext)); return nativeModules; } @Override public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) { return Collections.emptyList(); } } 复制代码
3、修改ReactNativeHost类的getPackages方法,将MyReactPackage添加到package列表。
public class MainApplication extends Application implements ReactApplication { private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) { @Override public boolean getUseDeveloperSupport() { return BuildConfig.DEBUG; } @Override protected List<ReactPackage> getPackages() { return Arrays.<ReactPackage>asList( new MainReactPackage(), new MyReactPackage() ); } @Override protected String getJSMainModuleName() { return "index"; } }; @Override public ReactNativeHost getReactNativeHost() { return mReactNativeHost; } @Override public void onCreate() { super.onCreate(); SoLoader.init(this, /* native exopackage */ false); } } 复制代码
原生端准备完毕,接下来看一下JS怎么使用我们定义的这个module
import React, {Component} from 'react'; import {Platform, StyleSheet, NativeModules, Text, View} from 'react-native'; RCTDemoToast = NativeModules.ReactUiModule; // 获取到Native Module type Props = {}; export default class App extends Component<Props> { render() { RCTDemoToast.showToast('ReactNative'); console.log('ReactNative','js first page render'); return ( <View style={styles.container}> <Text style={styles.welcome}>Welcome to React Native!</Text> <Text style={styles.instructions}>To get started, edit App.js</Text> </View> ); } } 复制代码
调用效果图
到此我们就实现了JS调用我们自定义Module的所有工作,例子比较简单大家可以自己根据上述步骤一步步操作,相信在创建的过程中会有自己的体会和收获。其间有什么建议或疑问欢迎和我们互动交流
原文链接: tech.meicai.cn/detail/72, 也可微信搜索小程序「美菜产品技术团队」,干货满满且每周更新,想学习技术的你不要错过哦。
以上所述就是小编给大家介绍的《动手创建一个自己的「React native」原生模块》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Flutter插件开发《iOS原生模块开发》
- react native 原生模块桥接的简单说明
- 使用Java 9的模块化来构建零依赖的原生应用
- Layui 2.1.6 发布,原生态模块化前端 UI 方案
- 万岁,浏览器原生支持ES6 export和import模块啦!
- 零信任原生安全:超越云原生安全
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。