ReactNative学习----20ReactNative中调用原生模块

官方文档：https://reactnative.cn/docs/native-modules-android/
RN调用原生的方法，步骤如下：

1.用Android Studio打开一个已存在的项目，在RN项目中选择android/build.gradle文件打开。

2.在Android原生的里面创建一个类MyNativeModule继承ReactContextBaseJavaModule，
这个类里面放被rn调用的方法，封装成了一个原生模块。

3.在Android原生的里面创建一个类MyReactPackage实现接口ReactPackage包管理器，并把
第2步创建的类MyNativeModule的对象加到createNativeModules方法的列表的返回值里面

4.将第3步创建的包管理器MyReactPackage对象添加到MainApplication中的getPackages方法的数组里面

5.在RN中调用原生模块 NativeModules.MyNativeModule.myToast(“翟浩浩”);
注意引入
import {NativeModules} from ‘react-native’;

RN项目结构：

用Android Studio在RN项目中选择android/build.gradle文件打开。

根据上面的步骤来写：
1在Android原生的里面创建一个类MyNativeModule继承ReactContextBaseJavaModule，
这个类里面放被rn调用的方法，封装成了一个原生模块。

package com.dys02;import android.content.Context;import android.widget.Toast;import com.facebook.react.bridge.ReactApplicationContext;import com.facebook.react.bridge.ReactContext;import com.facebook.react.bridge.ReactContextBaseJavaModule;import com.facebook.react.bridge.ReactMethod;import javax.annotation.Nonnull;/** * 自己封装的原生模块 */public class MyNativeModule extends ReactContextBaseJavaModule {    private Context context;    public MyNativeModule(@Nonnull ReactApplicationContext reactContext) {        super(reactContext);        context = reactContext;    }    /**     *  这个方法只能返回类名     */    @Nonnull    @Override    public String getName() {//      这里必须是类名        return "MyNativeModule";    }    /**     * 自己定义的方法，注意这里不能有返回值     * 只写一个吐丝测试一下     */    @ReactMethod    public void myToast(String msg) {        Toast.makeText(context, "" + msg, Toast.LENGTH_SHORT).show();    }}

2在Android原生的里面创建一个类MyReactPackage实现接口ReactPackage包管理器，并把
类MyNativeModule的对象加到createNativeModules方法的列表的返回值里面

package com.dys02;import com.facebook.react.ReactPackage;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.List;import javax.annotation.Nonnull;/** * 把原生模块 MyNativeModule 放到列表里 */public class MyReactPackage implements ReactPackage{    @Nonnull    @Override    public List createNativeModules(@Nonnull ReactApplicationContext reactContext) {        List  modules = new ArrayList<>();        modules.add(new MyNativeModule(reactContext));        return modules;    }    @Nonnull    @Override    public List createViewManagers(@Nonnull ReactApplicationContext reactContext) {        return null;    }}

3.将MyReactPackage对象添加到MainApplication中的getPackages方法的数组里面

package com.dys02;import android.app.Application;import com.facebook.react.ReactApplication;import com.facebook.react.ReactNativeHost;import com.facebook.react.ReactPackage;import com.facebook.react.shell.MainReactPackage;import com.facebook.soloader.SoLoader;import java.util.Arrays;import java.util.List;public class MainApplication extends Application implements ReactApplication {    private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {        @Override        public boolean getUseDeveloperSupport() {            return BuildConfig.DEBUG;        }        /**         * 把 MyReactPackage ，放到数组里，供rn调用         * @return         */        @Override        protected List getPackages() {            return Arrays.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);    }}

4在RN中调用原生模块 NativeModules.MyNativeModule.myToast(“翟浩浩”);
注意引入
import {NativeModules} from ‘react-native’;

/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */import React, {Component} from 'react';import {Platform, StyleSheet, Text,NativeModules, View} from 'react-native';type Props = {};export default class App extends Component {    render() {        return (                             this.iClick()}>调用原生代码!                To get started, edit App.js                    );    }    //点击事件    iClick = () => {        NativeModules.MyNativeModule.myToast("翟浩浩");    }}const styles = StyleSheet.create({    container: {        flex: 1,        justifyContent: 'center',        alignItems: 'center',        backgroundColor: '#F5FCFF',    },    welcome: {        fontSize: 20,        textAlign: 'center',        margin: 10,    },    instructions: {        textAlign: 'center',        color: '#333333',        marginBottom: 5,    },});

源码下载：
https://download.csdn.net/download/zhaihaohao1/11055183

更多相关文章

随机推荐