RN 与 Expo：环境搭建与第一个 App

这一课你将能做到

1. 说清楚 React Native 的渲染原理，以及它和 WebView 套壳、Flutter 的本质区别
2. 从零搭好开发环境，用 Expo 创建项目并在自己的手机上跑起来
3. 熟练使用热重载、调试菜单、真机调试的完整开发循环

为什么要学

你已经会 React，但 React 只能产出网页。公司说「我们要做个 App」，难道再去学一遍 Swift 和 Kotlin？那至少要半年。React Native（下称 RN）让你用 JavaScript + React 的写法，一套代码同时产出 iOS 和 Android 两个原生应用。

人话：RN 就像一名同声传译——你写 <View>，它在 iOS 上翻译成 UIView，在 Android 上翻译成 android.view.View。你看到的不是网页，是真原生控件，所以流畅度和纯原生 App 几乎一样。美团、Instagram、Discord、Shopify 的核心页面都在用 RN，这不是玩具技术。

而 Expo 是 RN 官方推荐的框架：它把相机、定位、推送这些原生能力封装成 JS API，把构建签名扔到云端，让初学者不碰 Xcode、不碰 Android Studio 也能交付 App。这一课的目标只有一个：今天就在自己手机上看到自己写的 App。

先建立图像

import { View, Text } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 24 }}>你好，React Native</Text>
    </View>
  );
}

手机上渲染结果：

┌───────────────────────┐
│                       │
│   你好，React Native   │  ← 屏幕正中央一行原生文字
│                       │
└───────────────────────┘

注意三件事：没有 <div> 没有 <p>；文字必须包在 <Text> 里；样式是 JS 对象不是 CSS 文件。这三条会贯穿整个系列。

RN 的运行架构（新架构）：

你的 JS 代码（React 组件树）
   ↓ JSI（直接内存互调，不再是异步桥）
原生线程：创建 UIView / android.view.View
   ↓
手机屏幕：真原生控件，手势、滚动都在原生线程

跟着做

步骤 1：准备环境（只要三样东西）

1. Node.js 18+：去 nodejs.org 下载 LTS 版，装完终端跑 node -v 验证
2. 手机装 Expo Go：iPhone 在 App Store、安卓在各大应用市场搜「Expo Go」安装
3. 电脑和手机连同一个 Wi-Fi

不需要 Xcode，不需要 Android Studio，不需要配 Java 环境——这就是选 Expo 的理由，省下的几小时用来写代码。

步骤 2：创建项目

npx create-expo-app@latest my-first-app --template blank
cd my-first-app
npx expo start

npx expo start 启动的是 Metro 打包器（RN 的「webpack」），它会实时把 JS 代码打包发给手机。终端里会出现一个二维码和几个提示按键。

步骤 3：真机运行

• iPhone：用系统相机扫二维码，自动跳转到 Expo Go 打开
• Android：打开 Expo Go，点「Scan QR code」扫码