Installation

npx create-expo-app@latest

Metro Bundler

Metro 是 React Native 默认用的 JavaScript 打包器（bundler），主要功能是：

• 解析依赖：从入口文件开始，根据 import/require 构建模块依赖图
• 转换源码：通过 Babel 等工具把现代 JS/JSX、TypeScript、图片、样式等转换成浏览器／原生能执行的格式
• 打包输出：将所有模块合并成一个或多个 bundle，供 App 加载，支持增量更新和热重载

它针对移动端调试和开发做了性能优化，启动快、修改回馈迅速。

Native Module

Native Module（本地模块）是指用原生语言（iOS 上的 Objective‑C/Swift，Android 上的 Java/Kotlin 或 C++）写的一段代码，它直接暴露平台能力给 JavaScript 使用。在 React Native 新架构里，它有以下特点：

• 基于 JSI 实现 TurboModule

  • 不再走旧版的 JSON‑Bridge；
  • 通过 C++ 层的代码生成（codegen）把方法、类型注册到 JS 引擎。
  • JS 里像调用普通函数一样同步或异步调用本地方法，零序列化开销。

• 注册流程

  1. 在原生代码里写接口声明（带注解），比如：

     // MyModule.h
     #include <jsi/jsi.h>
     using namespace facebook::jsi;
     Value getDeviceName(Runtime& rt, const Value* args, size_t count);
     

  2. 通过代码生成（codegen）工具，自动生成 C++ 包装器，并在初始化时注册到 JS 环境里。

  3. 在 JS 端：

     import {TurboModuleRegistry} from 'react-native';
     const MyModule = TurboModuleRegistry.getEnforcing('MyModule');
     console.log(MyModule.getDeviceName()); // 同步调用
     

• 性能优势

  • 省去了来回的序列化/反序列化；
  • 支持真正的同步调用（如果底层安全）；
  • 更接近原生性能、延迟更低。

• 何时用

  • 需要调用平台特有 SDK（相机、传感器、推送等）；
  • 有复杂运算或大数据交互，不适合全 JS 实现。