React Native 快速入门

新架构简介（JSI + Fabric + TurboModules）

React Native 在 0.71+ 默认启用了新架构，彻底重写了底层通信机制。了解这些有助于理解 RN 的工作原理：

JSI（JavaScript Interface）：用 C++ 替代了原来的 Bridge，JS 可以直接持有 Native 对象引用，同步调用 Native 方法，消除了旧架构中的序列化和异步延迟。
Fabric：新的渲染引擎，支持并发渲染，可以在后台线程预计算布局，减少主线程压力。
TurboModules：按需加载的原生模块，替代旧架构的启动时全量初始化，减少启动时间。

环境搭建

React Native 的环境搭建比 Flutter 稍复杂，需要同时配置 Node.js、JDK、Android SDK（或 Xcode）。

# 1. 安装 Node.js（推荐 LTS 版本）
# 使用 nvm 管理多版本
nvm install --lts
nvm use --lts

# 2. 安装 Watchman（macOS，文件监听工具）
brew install watchman

# 3. Android：安装 Android Studio，配置 ANDROID_HOME
export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/platform-tools

# 4. iOS：安装 Xcode + CocoaPods
sudo gem install cocoapods

创建项目

# 使用官方 CLI 创建（内置 TypeScript 支持）
npx react-native@latest init MyFirstRNApp

cd MyFirstRNApp

# 安装 iOS 依赖
cd ios && pod install && cd ..

# 启动 Android
npx react-native run-android

# 启动 iOS
npx react-native run-ios

项目结构

MyFirstRNApp/
├── android/          # Android 原生工程
├── ios/              # iOS 原生工程
├── src/              # 自己创建，存放业务代码
├── App.tsx           # 根组件入口
├── index.js          # JS 入口文件
├── package.json      # 依赖管理
└── metro.config.js   # Metro 打包器配置

第一个页面

// App.tsx
import React, { useState } from 'react';
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  TouchableOpacity,
  View,
} from 'react-native';

export default function App() {
  const [count, setCount] = useState(0);

  return (
    <SafeAreaView style={styles.container}>
      <ScrollView contentInsetAdjustmentBehavior="automatic">
        <View style={styles.content}>
          <Text style={styles.title}>MyAssets Demo 🚀</Text>
          <Text style={styles.count}>{count}</Text>
          <TouchableOpacity
            style={styles.button}
            onPress={() => setCount(c => c + 1)}
          >
            <Text style={styles.buttonText}>点击 +1</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#0a0f1e' },
  content: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 24 },
  title: { fontSize: 24, fontWeight: 'bold', color: '#e2e8f0', marginBottom: 32 },
  count: { fontSize: 64, fontWeight: '800', color: '#3b82f6', marginBottom: 24 },
  button: { backgroundColor: '#3b82f6', paddingHorizontal: 32, paddingVertical: 14, borderRadius: 8 },
  buttonText: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

RN 的样式用 JavaScript 对象（StyleSheet）定义，属性名使用驼峰命名（如 backgroundColor），这对前端开发者非常友好。

Metro 与热重载

Metro 是 React Native 专用的 JavaScript 打包器，负责将 TS/JS 代码转换并推送到设备。

Fast Refresh：修改 JS 代码后自动热更新，保留组件状态
摇晃设备（或 Cmd+D / Cmd+M）调出开发者菜单
点击 "Inspect" 可以高亮选择 UI 元素查看样式

新手常见问题

Metro 端口冲突：默认 8081 端口，可在 metro.config.js 修改
iOS pod install 失败：先执行 cd ios && pod deintegrate && pod install
Android gradle 下载超时：配置国内镜像源
「Unable to load script」：确保 Metro 服务在运行，设备和电脑在同一网络
新架构兼容性：部分老旧第三方库还不兼容新架构，暂时可在 android/gradle.properties 关闭 newArchEnabled=false