React Native 新架构

React Native 新架构是指使用新的工具和库来提升开发体验，如JSI（JavaScript Interface）和Turbo Modules。

JSI 是一个桥接原生模块与 JavaScript 的接口，它允许 JavaScript 直接调用原生模块的方法。

Turbo Modules 是轻量级的模块化插件，它们可以直接导入到 JavaScript 环境中，无需编译原生代码。

以下是如何在 React Native 项目中使用 JSI 的简单示例：

1. 安装 C++ 依赖，在项目根目录执行：

npm install react-native-reanimated
npx pod-install

2. 创建一个新的 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

3. 在 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);
}

4. 在你的 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 中使用它。