正文

reactnative入门——js与native互相通信(代码片段)

白玉梁  白玉梁  2023-01-09  435

关键词：

使用AndroidStudio打开项目中的android目录：

并等待Gradle Build完成，首次Build会花费不少时间，耐心等待！

编译成功后如图：

首先我们来介绍js调用native方法：

1.新建文件夹mymoudles和myreactpackage；

2.在mymoudles中新建类ToastMoudle；

public class ToastModule extends ReactContextBaseJavaModule 

    private ReactApplicationContext mContext;

    public ToastModule(ReactApplicationContext reactContext) 
        super(reactContext);
        mContext = reactContext;
    

    @Override
    public String getName() 
        return "Toast";
    

    @ReactMethod
    public void show(String msg) 
        Toast.makeText(mContext, msg, Toast.LENGTH_LONG).show();

3.在myreactpackage中新建类MyReactPackage；

public class MyReactPackage implements ReactPackage 

    static ReactApplicationContext reactContext;

    @Override
    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) 
        MyReactPackage.reactContext = reactContext;
        List<NativeModule> modules = new ArrayList<>();
        modules.add(new ToastModule(reactContext));
        return modules;
    

    @Override
    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) 
        return Collections.emptyList();
    

    public static void sendEvent(String eventName, String params) 
        reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);

4.在MainApplication的getPackages方法中，添加MyReactPackage：

在React的PageOne中测试：

	import 
	    NativeModules,
	    ...
	 from 'react-native';
	
    testNativeFunc() 
        NativeModules.Toast.show('调用NativeToast成功');
    

    render() 
        return (
            <SafeAreaView>
                <StatusBar barStyle='dark-content' backgroundColor='#fff' />
                <View style=styles.container>
                    <Text style= color: '#000', fontSize: 30, fontWeight: 'bold'  onPress=() => this.toPageTwo()>PageOne</Text>
                    <Text onPress=() => this.testNativeFunc() style=backgroundColor:"#eee",padding:10>调用NativeToast</Text>
                </View>
            </SafeAreaView>
        );

注意： 每当Native中的代码改动后，要生效就必须重新安装应用：关掉nodejs服务，并重新执行 npx yarn android！

是不是非常简单？

那本地如何调用js呢？这里就需要用到DeviceEventEmitter，在本地代码中发射事件，在js代码中接收事件：

 reactContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName, params);

let eventEmitter;

componentDidMount = () => 
	eventEmitter = DeviceEventEmitter.addListener('event', (params) => 
	          
	);


componentWillUnmount = () => 
    if (eventEmitter) eventEmitter.remove();

我们来测试一下，在点击按钮弹出Toast的同时，让Native发射一个事件到js，js接收到参数并显示出来：

ToastMoudle中加上发送代码：

    @ReactMethod
    public void show(String msg) 
        Toast.makeText(mContext, msg, Toast.LENGTH_LONG).show();
        mContext.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit("event", "native调js");

PageOne中加上接收代码：

import 
    DeviceEventEmitter,
    ...
 from 'react-native';

let eventEmitter;

export default class PageOne extends React.Component 

    constructor(props) 
        super(props);
        this.state = 
            text: ""
        ;
    
   ...
    componentDidMount = () => 
        eventEmitter = DeviceEventEmitter.addListener('event', (params) => 
            console.log("event>>" + params);
            this.setState(
                text: params
            );
        );
    

    componentWillUnmount = () => 
        if (eventEmitter) eventEmitter.remove();
    
    
    render() 
        return (
            <SafeAreaView>
                <StatusBar barStyle='dark-content' backgroundColor='#fff' />
                <View style=styles.container>
                    <Text style= color: '#000', fontSize: 30, fontWeight: 'bold'  onPress=() => this.toPageTwo()>PageOne</Text>
                    <Text onPress=() => this.testNativeFunc() style= backgroundColor: "#eee", padding: 10 >调用NativeToast</Text>
                    <Text style= color: '#FF0000', fontSize: 20, marginTop: 20  >this.state.text</Text>
                </View>
            </SafeAreaView>
        );

重新安装应用，点击按钮：

调用成功！

reactnative入门——js与native互相通信(代码片段)

使用AndroidStudio打开项目中的android目录：并等待GradleBuild完成，首次Build会花费不少时间，耐心等待！编译成功后如图：首先我们来介绍js调用native方法：1.新建文件夹mymoudles和myreactpackage；2.在mymoudles中... 查看详情

reactnative入门——js与native互相通信(代码片段)

reactnative入门-刘望舒

React Native入门(一)环境搭建与HelloWorldReact Native入门(二)Atom+Nuclide安装、配置与调试React Native入门(三)组件的Props(属性)和State(状态) 查看详情

reactnative入门代码结构

一、了解index.ios.js大家都清楚，React-Native就是在开发效率和用户体验间做的一种权衡。React-native是使用JS开发，开发效率高、发布能力强，不仅拥有hybrid的开发效率，同时拥有nativeapp相媲美的用户体验。目前天猫也在这块开始试... 查看详情

reactnative入门——导航和路由(代码片段)

ReactNavigation官方文档：https://reactnavigation.org/docs/getting-started/安装react-navigation：npminstall@react-navigation/native或npxyarnadd@react-navigation/native安装react-native-screens和react-native-safe-area-context：npminstallreact-native-screensreact-nati... 查看详情

reactnative入门——导航和路由(代码片段)

将 Strophe.js 与 React Native 一起使用

】将Strophe.js与ReactNative一起使用【英文标题】：UsingStrophe.jswithReactNative【发布时间】：2015-11-0616:00:01【问题描述】：我正在尝试构建一个ReactNative聊天应用程序。后端由ProsodyXMPP/Bosh服务器组成。现在我想使用Strophe.jsJavascript库进... 查看详情

更快速的reactnative快速入门

...交流群简书专题《React-Native开发阵营》，欢迎关注和投稿ReactNative优秀开源项目大全：https://github.com/MarnoDev/react-native-open-pr 查看详情

reactnative深入理解native与rn通信原理(代码片段)

在使用ReactNative开发应用程序的时候，有时候需要使用 JavaScript中默认不可用的IOS或Android的原生API。也许你想复用一些现有的OC、Swift、Java或C++库，而不必在JavaScript中重新实现它，或者为图像处理之类的... 查看详情

reactnative深入理解native与rn通信原理(代码片段)

6手把手教reactnative实战之jsx入门

React是由ReactJS与ReactNative组成，其中ReactJS是Facebook开源的一个前端框架，ReactNative是ReactJS思想在native上的体现！JSX并不是一门新的语言，仅仅是个语法糖，允许开发者在JavaScript中书写HTML语法。，最后每个HTML标签都转化为Java... 查看详情

reactnative入门-环境搭建,创建第一个helloworld(代码片段)

CreateReactNativeApp 是开始构建新的ReactNative应用程序的最简单方法。它允许您启动项目而无需安装或配置任何工具来构建本机代码-无需安装Xcode或AndroidStudio。先安装Node.Js，则可以使用npm来安装create-react-native-app命令行实用程序... 查看详情

无法从带有 Jest 的“react-native.js”中找到模块“ReactNative”

】无法从带有Jest的“react-native.js”中找到模块“ReactNative”【英文标题】：Cannotfindmodule\'ReactNative\'from\'react-native.js\'w/Jest【发布时间】：2018-02-2003:19:39【问题描述】：我正在尝试将jest(v20.0.0)与我的ReactNative应用程序(v0.42.0)一起使... 查看详情

reactnative基础与入门--初识reactnative

ReactNative组件ReactNative是用ReactNative框架来组建Android和IOSApp的技术，那么ReactNative组件就是React组件。React组件让你将UI分割成独立的、可重用的一些碎片或部分，这些部分都是相互独立的。创建组件的三种方式1.ES6创建组件的方式e... 查看详情

reactnative深入理解native与rn通信原理(代码片段)

如何将 Fabric js 与 React Native 集成？

】如何将Fabricjs与ReactNative集成？【英文标题】：HowtointegrateFabricjswithReactnative?【发布时间】：2019-06-2913:25:26【问题描述】：我正在为餐厅预订制作一个应用程序，我制作了一个fabric.js画布，允许您选择某个桌子，管理员也能够更... 查看详情