React Native - 技术栈

在 Mac 上开发 React Native (RN) 是最完美的选择，因为你可以同时兼顾 iOS 和 Android 双端。

为了让你最快、最顺滑地体验 RN 的开发过程，我强烈建议你跳过繁琐的原生环境配置（Xcode/Android Studio） ，直接使用 Expo 方案。这是目前官方和社区公认的新手最佳实践，能让你在几分钟内就把第一个 App 跑在自己的手机上。

以下是为你准备的从零到一的实操指南：

🛠️ 第一步：准备基础工具

安装 Node.js：RN 的运行依赖它。建议去官网下载最新的 LTS（长期支持）版本（如 v20 或 v22）并安装。
准备手机 ：在你的 iPhone 或 Android 手机上，去应用商店下载一个叫 Expo Go 的 App。
代码编辑器：推荐使用 VS Code。

⚡️ 第二步：一键创建项目

打开 Mac 的终端（Terminal），输入以下命令来创建你的第一个 RN 项目：

bash 复制代码

pnpm create expo-app@latest myFirstRN

(注：myFirstRN 是你的项目名称，可以随意修改)

等待命令执行完毕，然后进入项目文件夹：

bash 复制代码

cd myFirstRN

📱 第三步：在手机真机上预览

在项目目录下，直接运行启动命令：

bash 复制代码

pnpm expo start

此时，终端会弹出一个交互界面，并生成一个二维码。

如果你是 iPhone：打开系统自带的相机，扫描这个二维码，会自动跳转到 Expo Go App。
如果你是 Android ：打开 Expo Go App，可通过 https://expo.dev/go 下载，然后点击 "Scan QR Code" 进行扫描。

几秒钟后，你就会惊喜地发现，一个简单的模板页面已经成功运行在你自己的手机上了！

💻 第四步：写一个最简单的自定义页面

现在我们来改点代码，体验一下 RN 的开发手感。用 VS Code 打开 MyFirstApp 文件夹，找到根目录下的 App.js（或 App.tsx），把里面的内容全部删掉，替换成下面这段最基础的代码：

javascript 复制代码

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>👋 你好，React Native!</Text>
      <Text style={styles.subtitle}>这是我的第一个跨平台 App</Text>
    </View>
  );
}

// RN 使用 JS 对象来写样式，默认就是 Flexbox 布局
const styles = StyleSheet.create({
  container: {
    flex: 1, // 占满整个屏幕
    backgroundColor: '#f5f5f5', // 背景色
    alignItems: 'center', // 水平居中
    justifyContent: 'center', // 垂直居中
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
    marginBottom: 10,
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
  },
});

当你保存（Command + S）这段代码的瞬间，你会发现手机上的画面自动刷新了，变成了你刚刚写的界面。这就是 RN 强大的"热重载"功能，能极大提升开发效率。

📚 第五步：新手核心知识点速览

在体验过程中，你可能会发现它和写网页不太一样，记住这 3 个最核心的区别就能快速上手：

没有 HTML 标签 ：RN 里没有 div、p、span。最常用的组件是 <View>（相当于容器 div）、<Text>（专门用来包裹文字）和 <Image>。
样式即 JS 对象 ：不能写 CSS 文件，而是通过 StyleSheet.create 创建 JS 对象来控制样式。并且，RN 默认且几乎只使用 Flexbox 来进行布局。
一切都是组件 ：和 React 一样，你可以把页面上的任何部分抽离成独立的组件，通过 props 传递数据，用 state 管理状态。

按照这个流程走下来，你不仅绕开了最容易劝退新手的复杂环境配置，还能立刻体会到 RN "一套代码，双端运行"的魅力。等你把这个简单的 Demo 玩熟了，再考虑去配置完整的原生开发环境也不迟。快去试试吧！