React Native 新架构是指使用新的工具和库来提升开发体验，如JSI（JavaScript Interface）和Turbo Modules。
JSI 是一个桥接原生模块与 JavaScript 的接口，它允许 JavaScript 直接调用原生模块的方法。
Turbo Modules 是轻量级的模块化插件，它们可以直接导入到 JavaScript 环境中，无需编译原生代码。
以下是如何在 React Native 项目中使用 JSI 的简单示例：
- 安装 C++ 依赖，在项目根目录执行：
npm install react-native-reanimated
npx pod-install- 创建一个新的 C++ 文件，例如
NativeModuleExample.cpp，并实现你的原生模块：
#include <jsi/jsi.h>
#include <memory>
using namespace facebook;
namespace example {
// 实现一个简单的原生函数
std::string helloWorld() {
return "Hello, world!";
}
// 创建一个 JSI 对象
std::shared_ptr<jsi::Function> createJSIFunction(jsi::Runtime& runtime) {
auto helloWorld = [](jsi::Runtime& runtime)
return jsi::String::createFromUtf8(runtime, example::helloWorld());
};
return jsi::Function::createFromHostFunction(
runtime,
jsi::PropNameID::forAscii(runtime, "helloWorld"),
,
helloWorld
);
}
} // namespace example- 在
react-native模块中注册你的 JSI 函数：
#include <ReactCommon/CallInvokerHolder.h>
#include <jsi/jsi.h>
namespace example {
void installJSI(jsi::Runtime& runtime) {
std::shared_ptr<jsi::Function> helloWorld = createJSIFunction(runtime);
runtime.global().setProperty(runtime, "helloWorld", std::move(helloWorld));
}
} // namespace example
extern "C" __attribute__((used))
void install(jsi::Runtime& runtime) {
// 注册你的 JSI 函数
example::installJSI(runtime);
}- 在你的 React Native 应用中使用这个 JSI 函数：
import React, { useEffect } from 'react';
import { NativeModules, Text, View } from 'react-native';
export default function App() {
useEffect(() => {
const { helloWorld } = NativeModules;
const result = helloWorld();
console.log(result); // 输出: Hello, world!
}, []);
return (
<View>
<Text>JSI Example</Text>
</View>
);
}确保你的原生模块已经正确注册，并且在 JavaScript 中可以访问。这个例子展示了如何创建一个原生函数并通过 JSI 在 JavaScript 中使用它。