React-Native与Android原生数据通信之回调函数

概述写作时间：2020/4/8React-Native版本：0.62.2AndroidStudio版本：3.5.2开发平台：Windows目标平台：Android在RN的开发过程中，有时会不可避免地使用原生模块。本文通过利用回调函数实现RN和Android原生之间的通信。实现的结果是在RN界面输入文字之后，将文字发送给原生，原生在收到文

写作时间：2020/4/8
React-Native版本：0.62.2
AndroID Studio版本：3.5.2
开发平台：windows
目标平台：AndroID

在RN的开发过程中，有时会不可避免地使用原生模块。本文通过利用回调函数实现RN和AndroID原生之间的通信。实现的结果是在RN界面输入文字之后，将文字发送给原生，原生在收到文字之后对其进行简单处理（添加后缀）再返回给RN界面。如下图所示

以下是具体 *** 作过程

1 通过react-native init 命令创建一个初始项目（我创建的项目名称为Init），打开项目中的App.Js文件，将代码全部删除，换成如下内容

// App.Jsimport React from 'react';import {VIEw, Text, Textinput, button, StyleSheet, NativeModules} from 'react-native';const NativeModule = NativeModules.MyNativeModule;export default class App extends React.Component {    constructor() {        super();        this.state = {postText: '', newText: ''};    }    render() {        return (            <VIEw style={styles.page}>                <Textinput                    style={styles.input}                    placeholder="请输入文字"                    value={this.state.postText}                    onChangeText={(text) => this.setState({postText: text})}                />                <button                    title="提交给原生"                    onPress={() => {                        NativeModule.addSuffix(                            this.state.postText,                            (msg) => {                                console.log(msg);                            },                            (newText) => {                                this.setState({newText: newText});                            },                        );                    }}                />                <Text>{this.state.newText}</Text>            </VIEw>        );    }}const styles = StyleSheet.create({    page: {        flex: 1,        backgroundcolor: '#F7F7F7',        justifyContent: 'space-evenly',    },    input: {        height: 80,        borderWIDth: 1,        bordercolor: '#ddddDD',    },});

2 通过AndroID Studio打开RN工程下的AndroID项目，在app/java/com/init目录下找到MainApplication.java文件，对文件进行如下修改

修改1

// MainApplication.java···// 新添加MyReactPackage包（这个包会在后面创建）import com.init.MyReactPackage;···

修改2

// MainApplication.java···@OverrIDeprotected List<ReactPackage> getPackages() {    @SuppressWarnings("UnnecessaryLocalVariable")    List<ReactPackage> packages = new PackageList(this).getPackages();        //找到getPackages方法，添加如下语句    packages.add(new MyReactPackage());        return packages;}···

3 在同路径下新建文件，命名为MyNativeModule.java，代码如下

// MyNativeModule.javapackage com.init;import com.facebook.react.brIDge.Callback;import com.facebook.react.uimanager.IllegalVIEwOperationException;import com.facebook.react.brIDge.NativeModule;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 java.util.Map;import java.util.HashMap;public class MyNativeModule extends ReactContextBaseJavaModule {    private static ReactApplicationContext context;    public MyNativeModule(ReactApplicationContext reactContext) {        super(reactContext);        context = reactContext;    }    @OverrIDe    public String getname() {        return "MyNativeModule";    }    @ReactMethod    public voID addSuffix(String name,Callback errorCallback,Callback successCallback){        try {            successCallback.invoke(name + "_native");        }catch (IllegalVIEwOperationException e){            errorCallback.invoke(e.getMessage());        }    }}

4 在相同目录下再创建另一个文件MyReactPackage.java，代码如下

// MyReactPackage.javapackage com.init;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.Collections;import java.util.List;public class MyReactPackage implements ReactPackage {    @OverrIDe    public List<VIEwManager> createVIEwManagers(ReactApplicationContext reactContext) {        return Collections.emptyList();    }    @OverrIDe    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {        List<NativeModule> modules = new ArrayList<>();        modules.add(new MyNativeModule(reactContext));        return modules;    }}

5 重新执行react-native run-androID，成功！

总结

以上是内存溢出为你收集整理的React-Native与Android原生数据通信之回调函数全部内容，希望文章能够帮你解决React-Native与Android原生数据通信之回调函数所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。