react-native创建原生模块

前端之家收集整理的这篇文章主要介绍了react-native创建原生模块前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

react-native文档未更新,照着文档实现还是坑了不少,记录下基本步骤。

  1. 1,继承ReactContextBaseJavaModule
  2. a,getName:模块名称
  3. b,getConstants:常量映射
  4. c,@ReactMethod注解暴露java方法
  5. public void show(String message,int duration) {
  6. Toast.makeText(getReactApplicationContext(),message,duration).show();
  7. }
  8. 2注册原生模块
  9. a,提供一个ReactPackage(继承ReactPackage
  10. b,public List<NativeModule> createNativeModules(ReactApplicationContext reactContext)
  11. 添加原生模块。
  12. public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
  13. List<NativeModule> modules = new ArrayList<>(1);
  14. modules.add(new MyToast(reactContext));
  15. return modules;
  16. }
  17. c,注册包(ReactPackage)
  18. 1),ReactInstanceManager.addPackage原生实现的ReactPackage;
  19. 2),ReactApplication重写getPackages.
  20. protected List<ReactPackage> getPackages() {
  21. return Arrays.<ReactPackage>asList(
  22. new MainReactPackage(),new MyReactPackage()
  23. );
  24. }
  25. 3js使用
  26. a,js引入原生模块
  27. var { NativeModules } = require('react-native');
  28. var MyToast = NativeModules.MyToast;
  29. b,调用
  30. MyToast.show('you click me!',MyToast.SHORT);

猜你在找的React相关文章