动手创建一个自己的「React native」原生模块

栏目: IOS · Android · 发布时间: 5年前

内容简介:我们在使用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>
    );
  }
}
复制代码

调用效果图

动手创建一个自己的「React native」原生模块

到此我们就实现了JS调用我们自定义Module的所有工作,例子比较简单大家可以自己根据上述步骤一步步操作,相信在创建的过程中会有自己的体会和收获。其间有什么建议或疑问欢迎和我们互动交流

原文链接: tech.meicai.cn/detail/72, 也可微信搜索小程序「美菜产品技术团队」,干货满满且每周更新,想学习技术的你不要错过哦。


以上所述就是小编给大家介绍的《动手创建一个自己的「React native」原生模块》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Ruby元编程

Ruby元编程

[意] Paolo Perrotta / 廖志刚、陈睿杰 / 华中科技大学出版社 / 2012-1-10 / 56.00元

《Ruby元编程》以案例形式循序渐进讲解Ruby对象模型原理和高级应用技巧,堪称动态语言的设计模式。书中讲述的各种Ruby编程模式,完全可以应用于其他动态语言(甚至静态语言)。本书不仅适合Ruby程序员阅读,也适合对动态编程 语言和面向对象编程感兴趣的读者阅读。所有对程序设计理论感兴趣的人都能从中获益。Ruby之父松本行弘作序推荐。一起来看看 《Ruby元编程》 这本书的介绍吧!

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具