首页 > 资讯 > 前端开发 > JavaScript >React Native JSI实现RN与原生通信的示例代码

383

分享到

React Native JSI实现RN与原生通信的示例代码

2024-04-02 19:04:59 383人浏览泡泡鱼

摘要

目录什么是jsI JSI有什么不同在iOS中使用JSI ioS端配置 RN端配置 js调用带参数的原生方法原生调用JS 原生调用带参数的JS方法在原生端调用js的函数参数总结

什么是JSI

React Native JSI (javascript Interface) 可以使 JavaScript 和原生模块更快、更简单的通信。它也是React Native 新的架构体系中Fabric UI层和 Turbo 模块的核心部分。

JSI有什么不同

JSI 移除了原生代码和JavaScript代码之间的桥接（bridge），同时也省去了两端相互调用时大量的JSON序列化和反序列化操作。JSI为原生和JS交互打开了新的大门。下面是一些JSI的特点：

JavaScript Interface 允许我们向JavaScript 运行时注册方法。这些方法在js环境中可以通过 global对象获取并调用。
我们完全可以使用c++或者在iOS里使用OC ，在Android里使用Java实现这些注册方法。
原先使用bridge 的方式实现的原生模块可以通过增加一层C++，快速转化为通过JSI实现。
在iOS端实现非常简单，因为C++和OC 可以方便的实现混编。
在Android中，我们需要通过JNI 做一些转化。
这些方法可以是完全同步的，这意味着不必强制使用async。await。

在iOS中使用JSI

下面我们将一步一步的在iOS工程中使用JSI实现原生与JS的通信。
创建一个新的React Native 项目


npx react-native init jsiDemo

iOS端配置

在iOS项目目录中创建C++文件，example.h、 example.cpp。
example.h


#ifndef EXAMPLE_H
#define EXAMPLE_H

namespace facebook {
 namespace jsi {
  class Runtime;
 }
}

namespace example {
 void install(facebook::jsi::Runtime &jsiRuntime);
}
#endif 

example.m
#include "example.h"
#include <jsi/jsi.h>
using namespace facebook::jsi;
using namespace std;

namespace example {
 void install(Runtime &jsiRuntime) {  
    auto helloWorld = Function::createFromHostFunction(jsiRuntime,
                                                       PropNameID::forAscii(jsiRuntime,
                                                                            "helloWorld"),
                                                       0,
                                                       [](Runtime &runtime,
                                                          const Value &thisValue,
                                                          const Value *arguments,
                                                          size_t count) -> Value {
        string helloworld = "helloworld";
        return Value(runtime, String::createFromUtf8(runtime,helloworld));
    });
    
    jsiRuntime.global().setProperty(jsiRuntime, "helloWorld", move(helloWorld));
    
 }
}

在上面的代码中，我们使用 createFromHostFunction 方法创建了一个方法，并通过setProperty 方法将其注册到js运行时。
接下来，我们需要创建一个moudle, 在moudle中执行install 方法。
我们创建OC 文件，SimpleJsi.h ， SimpleJsi.mm

SimpleJsi.h


#import <React/RCTBridgeModule.h>
@interface SimpleJsi : NSObject <RCTBridgeModule>
@property (nonatomic, assign) BOOL setBridgeOnMainQueue;
@end

SimpleJsi.mm


#import "SimpleJsi.h"
#import <React/RCTBridge+Private.h>
#import <React/RCTUtils.h>
#import <jsi/jsi.h>
#import "example.h"
#import <sys/utsname.h>

using namespace facebook::jsi;
using namespace std;

@implementation SimpleJsi

@synthesize bridge = _bridge;
@synthesize methodQueue = _methodQueue;

RCT_EXPORT_MODULE()

+ (BOOL)requiresMainQueueSetup {
    
    return YES;
}

- (void)setBridge:(RCTBridge *)bridge {
    _bridge = bridge;
    _setBridgeOnMainQueue = RCTIsMainQueue();
    [self installLibrary];
}

- (void)installLibrary {
    
    RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
    
    if (!cxxBridge.runtime) {
        
        
        
        dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC),
                       dispatch_get_main_queue(), ^{
            
            [self installLibrary];
            
        });
        return;
    }
    
    example::install(*(facebook::jsi::Runtime *)cxxBridge.runtime);
}

@end

在 setBridge 方法中，我们调用了 example的 install 方法，完成方法的注册。

RN端配置

修改App.js


import React from 'react';
import type {node} from 'react';
import {Text, View, Button} from 'react-native';

const App: () => Node = () => {
  const [result, setResult] = React.useState();

  const press = () => {
    setResult(global.helloWorld());
  };
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{backgroundColor: '#FFFFFF', height: '100%'}}>
      <View style={{height: '10%'}} />
      <Button onPress={press} title="按钮" />
      <Text>{'调用helloWord:' + result}</Text>
    </View>
  );
};

export default App;

点击按钮之后，发现result的值为helloworld。

结果

上面我们实现了js 调用原生，但没有参数，接下来我们实现一个单参数的调用。

js调用带参数的原生方法

我们在example.cpp 的 install 方法中增加multiply方法的注册，从arguments 中取出入参。


auto multiply = Function::createFromHostFunction(jsiRuntime,
                                                     PropNameID::forAscii(jsiRuntime,
                                                                          "multiply"),
                                                     2,
                                                     [](Runtime &runtime,
                                                        const Value &thisValue,
                                                        const Value *arguments,
                                                        size_t count) -> Value {
        int x = arguments[0].getNumber();
        int y = arguments[1].getNumber();
        return Value(x * y); 
    });

jsiRuntime.global().setProperty(jsiRuntime, "multiply", move(multiply));

然后修改App.js


import React from 'react';
import type {Node} from 'react';
import {Text, View, Button} from 'react-native';

const App: () => Node = () => {
  const [result, setResult] = React.useState();

  const press = () => {
    setResult(global.multiply(2, 2));
  };
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{backgroundColor: '#FFFFFF', height: '100%'}}>
      <View style={{height: '10%'}} />
      <Button onPress={press} title="按钮" />
      <Text>{'2*2 = ' + result}</Text>
    </View>
  );
};

export default App;

结果

原生调用JS

原生调用js主要通过jsiRuntime.global().getPropertyAsFunction(jsiRuntime, "jsMethod").call(jsiRuntime);方法实现。
首先我们在js中增加一个js方法。我们修改App.js 在上面增加jsMethod 方法。


import React from 'react';
import type {Node} from 'react';
import {Text, View, Button} from 'react-native';

const App: () => Node = () => {
  const [result, setResult] = React.useState();

  global.jsMethod = () => {
    alert('hello jsMethod');
  };

  const press = () => {
    setResult(global.multiply(2, 2));
  };
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{backgroundColor: '#FFFFFF', height: '100%'}}>
      <View style={{height: '10%'}} />
      <Button onPress={press} title="按钮" />
      <Text>{'2*2 = ' + result}</Text>
    </View>
  );
};

export default App;

在原生端，我们假设在进入应用的时候触发调用js方法，我们修改AppDelegate中的applicationWillEnterForeground 方法。


- (void)applicationWillEnterForeground:(UIApplication *)application {
  SimpleJsi *jsi = [self.bridge moduleForName:@"SimpleJsi"];
  [jsi calljs];
}

通过moduleForName方法获取SimpleJsi对象，然后通过SimpleJsi中的calljs 方法。


- (void)calljs {
  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
  Runtime &jsiRuntime = *(facebook::jsi::Runtime *)cxxBridge.runtime;
  jsiRuntime.global().getPropertyAsFunction(jsiRuntime, "jsMethod").call(jsiRuntime);
}

结果

原生调用带参数的JS方法

多参数调用和无参调用类似，只是在call方法后面增加了参数列表。
首先我们先在js侧定义方法，修改app.js


import React from 'react';
import type {Node} from 'react';
import {Text, View, Button} from 'react-native';

const App: () => Node = () => {
  const [result, setResult] = React.useState();

  global.jsMethod = () => {
    alert('hello jsMethod');
  };

  global.jsMultiply = (x, y) => {
    alert('x * y = ' + x * y);
  };

  const press = () => {
    setResult(global.multiply(2, 2));
  };
  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{backgroundColor: '#FFFFFF', height: '100%'}}>
      <View style={{height: '10%'}} />
      <Button onPress={press} title="按钮" />
      <Text>{'2*2 = ' + result}</Text>
    </View>
  );
};

export default App;

然后我们修改原生端的调用
AppDelegate.m


- (void)applicationWillEnterForeground:(UIApplication *)application {
  SimpleJsi *jsi =  [self.bridge moduleForName:@"SimpleJsi"];
//  [jsi calljs];
  [jsi callJsMultiply:4 y:4];
}

SimpleJsi.m


- (void)callJsMultiply:(int)x y:(int) y {
  RCTCxxBridge *cxxBridge = (RCTCxxBridge *)self.bridge;
  Runtime &jsiRuntime = *(facebook::jsi::Runtime *)cxxBridge.runtime;
  jsiRuntime.global().getPropertyAsFunction(jsiRuntime, "jsMultiply").call(jsiRuntime, x, y);
}

结果

在原生端调用js的函数参数

在原生中调用js参数中的函数，需要通过arguments[i].getObject(runtime).getFunction(runtime).call(runtime, value);的方式触发。

首先我们在example.cpp 中新注册一个方法multiplyWithCallback


auto multiplyWithCallback = Function::createFromHostFunction(jsiRuntime,
                                                                 PropNameID::forAscii(jsiRuntime,
                                                                                      "multiplyWithCallback"),
                                                                 3,
                                                                 [](Runtime &runtime,
                                                                    const Value &thisValue,
                                                                    const Value *arguments,
                                                                    size_t count) -> Value {
        int x = arguments[0].getNumber();
        int y = arguments[1].getNumber();
        //调用callback
        arguments[2].getObject(runtime).getFunction(runtime).call(runtime, x * y);
        
        return Value();
        
    });
    
    jsiRuntime.global().setProperty(jsiRuntime, "multiplyWithCallback", move(multiplyWithCallback));

在js侧进行调用，修改app.js


import React from 'react';
import type {Node} from 'react';
import {Text, View, Button} from 'react-native';

const App: () => Node = () => {
  const [result, setResult] = React.useState();

  global.jsMethod = () => {
    alert('hello jsMethod');
  };

  global.jsMultiply = (x, y) => {
    alert('x * y = ' + x * y);
  };

  const press = () => {
    // setResult(global.multiply(2, 2));
    global.multiplyWithCallback(4, 5, alertResult);
  };

  const alertResult = res => {
    alert(res);
  };

  return (
    // eslint-disable-next-line react-native/no-inline-styles
    <View style={{backgroundColor: '#FFFFFF', height: '100%'}}>
      <View style={{height: '10%'}} />
      <Button onPress={press} title="按钮" />
      <Text>{'2*2 = ' + result}</Text>
    </View>
  );
};

export default App;

点击按钮之后，会调用multiplyWithCallback 将alertResult 方式传递给原生。

结果

总结

上面就是本文对JSI 的介绍，文中的代码，你可以在公众号回复 JSI 获取GitHub 下载地址。

问题

在RN Debug的情况下，global.xx 无法找到对应的方法，个人也没有头绪，如果你有方法解决，请联系我，非常感谢。

参考资料

https://blog.notesnook.com/getting-started-react-native-jsi/
reactnative.maxieewong.com/
Https://github.com/react-native-commUnity/discussions-and-proposals/issues/91
ospfranco.com/

到此这篇关于React Native JSI实现RN与原生通信的示例代码的文章就介绍到这了,更多相关React Native原生通信内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: React Native JSI实现RN与原生通信的示例代码

本文链接: https://www.lsjlt.com/news/133359.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

React Native JSI实现RN与原生通信的示例代码

目录什么是JSI JSI有什么不同在iOS中使用JSI iOS端配置 RN端配置 js调用带参数的原生方法原生调用JS 原生调用带参数的JS方法在原生端调用js的函数参数总结...

99+

2022-11-12
golang原生实现JWT的示例代码

目录获取Token解析Token实际使用测试结果结语JWT（JSON Web Token）是一种基于JSON的安全令牌，可以用于在不同系统之间传输认证信息。在Go中实现JWT验证，可...

99+

2023-05-19

golang实现JWT golang JWT
QT5实现UDP通信的示例代码

目录前言一、UDP通信概述二、UDP单播模式1.接收数据 2.发送数据总结代码h文件代码c文件前言该例程经过实际验证可以正常使用，只简单的使用UDP中的单播模式（一对...

99+

2022-11-12
原生JavaScript实现模态框的示例代码

目录原生js封装模态框示例效果代码原生js封装模态框最近需要一个模态框，然后一种是提示类的，一种是确认类型，我就想着再网上找一个然后修改一下，结果找到了，但是不深特别合适，我再次基...

99+

2022-11-13
python实现socket简单通信的示例代码

首先先来简单介绍下socket：（具体更详细介绍的可以在网上找找，都讲得非常详细)，这里主要是我自己的一些理解。 socket是在应用层与传输层之间的一个抽象层，它的本质是编程接...

99+

2022-11-12
原生JS实现拖拽排序的示例代码

目录HTML中的拖拽事件（drag & drop）Coding完整代码说到拖拽，应用场景不可谓不多。无论是打开电脑还是手机，第一眼望去的界面都是可拖拽的，靠拖拽实现...

99+

2022-12-08

JS实现拖拽排序 JS拖拽排序 JS 排序
Android AIDL实现跨进程通信的示例代码

AIDL是Android接口定义语言，它可以用于让某个Service与多个应用程序组件之间进行跨进程通信，从而可以实现多个应用程序共享同一个Service的功能。实现步骤例：用 A程序去访问 B程序的MyService.java服务在B...

99+

2023-05-30

android 跨进程通信 aidl
QT5实现UDP通信的示例代码怎么写

QT5实现UDP通信的示例代码怎么写，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。前言该例程经过实际验证可以正常使用，只简单的使用UDP中的单播模式（一对一），...

99+

2023-06-22
原生JS实现H5转盘游戏的示例代码

目录1.基础的页面布局（index.html）1.1html布局1.2css布局（style.css）2.工具函数（用于调整概率）3.传参及接收值配置4.dom操作方法及具体逻辑处理...

99+

2022-11-13
java利用socket通信实现Modbus-RTU通信协议的示例代码

Modbus Modbus是一种串行通信协议。Modbus 一个工业上常用的通讯协议、一种通讯约定。Modbus协议包括RTU、ASCII、TCP。其中MODBUS-RTU最常用，...

99+

2022-11-12
使用postMessage实现iframe跨域通信的示例代码

1、父页面内容 <!DOCTYPE html> <html> <head> <meta charset="utf-8...

99+

2022-11-13
websocket结合node.js实现双向通信的示例代码

首先我们需要了解，什么是websocket，它的作用和优势是什么，为什么要用它。什么是websocket websocket是基于TCP的一种双向通信协议。在此之前，一直是采用轮询...

99+

2023-02-10

websocket node.js双向通信 node.js双向通信
原生java代码实现码云第三方验证登录的示例代码

目录码云第三方验证登录一、在码云上创建应用1、在码云上注册一个账号，点击右上角设置2、创建应用3、填写资料4、获取到clientId以及client Secret二、在项目中实现第三...

99+

2022-11-12
基于原生JS实现分页效果的示例代码

这个只是一个分页的demo，主要是思路整理(很久之前项目用的东西) 分页实现的效果主要是左侧上一页右侧是下一页中间显示主要是超过5个显示省略号然后是可配置选项实现之后的...

99+

2022-11-13
基于PHP实现原生增删改查的示例代码

目录一、代码1、sql2、列表页(index.php)3、delete.php4、update.php5、create.php二、效果图一、代码 1、sql -- phpM...

99+

2022-11-13
Python实现学生信息管理系统的示例代码

目录前言正文一、新手小白的福利——零基础学生信息管理系统二、GUI界面化版本——Tkinter学生信息管理系统前言夏天是用来告别的季...

99+

2023-02-15

Python实现学生信息管理系统 Python学生信息管理系统 Python信息管理系统
C++实现即时通信的示例代码(直接运行)

目录题目软件：VS服务器端客户端题目由于本学期上了网络编程课程，老师要求写使用Socke实现网络编程。于是参考 C++多线程实现即时通信软件写出了简单版本的没有界面的即时通信软件...

99+

2022-11-13
原生Js 实现的简单无缝滚动轮播图的示例代码

简单无缝滚动轮播图存在很多漏洞，就是后期增加图片时会很不方便，需要改动的地方也很多，耦合性也很强，只适用于一部分程序，所以我们可以通过改动图片结构和计算...

99+

2022-11-12
vue实现通过手机号发送短信验证码登录的示例代码

本文主要介绍了vue实现通过手机号发送短信验证码登录的示例代码，分享给大家，具体如下： <template> <div class="get-mobile...

99+

2022-11-13
Flutter仿微信通讯录实现自定义导航条的示例代码

某些页面比如我们在选择联系人或者某个城市的时候需要快速定位到我们需要的选项，一般都会需要像微信通讯录右边有一个导航条一样的功能，由A到Z进行快速定位,本篇文章我们将自己来实现一个跟微...

99+

2022-11-13