溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“怎么用React Native JSI實(shí)現(xiàn)RN與原生通信”，在日常操作中，相信很多人在怎么用React Native JSI實(shí)現(xiàn)RN與原生通信問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”怎么用React Native JSI實(shí)現(xiàn)RN與原生通信”的疑惑有所幫助！接下來，請跟著小編一起來學(xué)習(xí)吧！
什么是JSI
JSI有什么不同
在iOS中使用JSI
iOS端配置
RN端配置
js調(diào)用帶參數(shù)的原生方法
原生調(diào)用JS
原生調(diào)用帶參數(shù)的JS方法
在原生端調(diào)用js的函數(shù)參數(shù)
React Native JSI (JavaScript Interface) 可以使 JavaScript 和 原生模塊 更快、更簡單的通信。它也是React Native 新的架構(gòu)體系中Fabric UI層 和 Turbo 模塊的核心部分。
JSI 移除了原生代碼和JavaScript代碼之間的橋接（bridge），同時也省去了兩端相互調(diào)用時大量的JSON序列化和反序列化操作。JSI為原生和JS交互打開了新的大門。下面是一些JSI的特點(diǎn)：
JavaScript Interface 允許我們向JavaScript 運(yùn)行時注冊方法。這些方法在js環(huán)境中可以通過 global對象獲取并調(diào)用。
我們完全可以使用C++或者在iOS里使用OC ，在Android里使用Java實(shí)現(xiàn)這些注冊方法。
原先使用bridge 的方式實(shí)現(xiàn)的原生模塊可以通過增加一層C++，快速轉(zhuǎn)化為通過JSI實(shí)現(xiàn)。
在iOS端實(shí)現(xiàn)非常簡單，因為C++和OC 可以方便的實(shí)現(xiàn)混編。
在Android中，我們需要通過JNI 做一些轉(zhuǎn)化。
這些方法可以是完全同步的，這意味著不必強(qiáng)制使用async。await。
下面我們將一步一步的在iOS工程中使用JSI實(shí)現(xiàn)原生與JS的通信。
創(chuàng)建一個新的React Native 項目
npx react-native init jsiDemo
在iOS項目目錄中創(chuàng)建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_H */
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 方法創(chuàng)建了一個方法，并通過setProperty 方法將其注冊到j(luò)s運(yùn)行時。
接下來，我們需要創(chuàng)建一個moudle, 在moudle中執(zhí)行install 方法。
我們創(chuàng)建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) {
/**
* This is a workaround to install library
* as soon as runtime becomes available and is
* not recommended. If you see random crashes in iOS
* global.xxx not found etc. use this.
*/
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, 0.001 * NSEC_PER_SEC),
dispatch_get_main_queue(), ^{
/**
When refreshing the app while debugging, the setBridge
method is called too soon. The runtime is not ready yet
quite often. We need to install library as soon as runtime
becomes available.
*/
[self installLibrary];
});
return;
}
example::install(*(facebook::jsi::Runtime *)cxxBridge.runtime);
}
@end在 setBridge 方法中，我們調(diào)用了 example的 install 方法，完成方法的注冊。
修改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>{'調(diào)用helloword:' + result}</Text>
</View>
);
};
export default App;點(diǎn)擊按鈕之后，發(fā)現(xiàn)result的值為helloworld。
結(jié)果
上面我們實(shí)現(xiàn)了js 調(diào)用原生，但沒有參數(shù)，接下來我們實(shí)現(xiàn)一個單參數(shù)的調(diào)用。
我們在example.cpp 的 install 方法中增加multiply方法的注冊，從arguments 中取出入?yún)ⅰ?br/>
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;結(jié)果
原生調(diào)用js主要通過jsiRuntime.global().getPropertyAsFunction(jsiRuntime, "jsMethod").call(jsiRuntime);方法實(shí)現(xiàn)。
首先我們在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;在原生端，我們假設(shè)在進(jìn)入應(yīng)用的時候觸發(fā)調(diào)用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);
}結(jié)果
多參數(shù)調(diào)用和無參調(diào)用類似，只是在call方法后面增加了參數(shù)列表。
首先我們先在js側(cè)定義方法，修改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;然后我們修改原生端的調(diào)用
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);
}結(jié)果
在原生中調(diào)用js參數(shù)中的函數(shù)，需要通過arguments[i].getObject(runtime).getFunction(runtime).call(runtime, value);的方式觸發(fā)。
首先我們在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();
//調(diào)用callback
arguments[2].getObject(runtime).getFunction(runtime).call(runtime, x * y);
return Value();
});
jsiRuntime.global().setProperty(jsiRuntime, "multiplyWithCallback", move(multiplyWithCallback));在js側(cè)進(jìn)行調(diào)用， 修改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;點(diǎn)擊按鈕之后，會調(diào)用multiplyWithCallback 將alertResult 方式傳遞給原生。
結(jié)果
到此，關(guān)于“怎么用React Native JSI實(shí)現(xiàn)RN與原生通信”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注億速云網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼