React Native快速入门：从零开始构建你的第一个移动应用

大家好，我是一名开源项目维护者，也是一名移动开发讲师。这几年，我见过太多初学者在接触 React Native 时被复杂的环境配置和抽象的概念劝退。我当初学的时候，光是安装依赖就折腾了三天，最后发现只是少装了一个 CLI 工具。 所以今天，我决定写一篇真正“手把手”级别的教程，带你用最轻松的方式，迈出 React Native 开发的第一步。

本文将通过一个综合的实战案例——一个简单的“待办事项（Todo）列表”应用——来带你完整体验从环境搭建到代码编写、调试运行的全过程。无论你是完全零基础的小白，还是有 Web 开发经验但没碰过移动端的新手，都能跟着做出来。

---

为什么选择 React Native？

React Native 是由 Facebook（现 Meta）推出的开源框架，它允许你用 JavaScript 和 React 的语法，编写能同时运行在 iOS 和 Android 上的原生应用。
简单说：写一次代码，就能生成两个平台的 App。

这不仅节省了开发成本，还让你能复用已有的 Web 开发经验。如果你会一点 HTML/CSS/JS，那上手会更快！

---

第一步：搭建开发环境（别怕，我陪你）

环境配置是新手最容易卡住的地方。别担心，我会把每一步都写清楚。我们采用官方推荐的 Expo 方式，它能极大简化开发流程，特别适合初学者。

你需要准备：

• 一台电脑（Windows / macOS / Linux 都可以）
• 稳定的网络（因为要下载依赖）
• 一部安卓或 iPhone（用于真机调试，也可以用模拟器）

安装步骤（只需三步！）

步骤	操作	命令
1. 安装 Node.js	去 nodejs.org 下载 LTS 版本并安装	——
2. 安装 Expo CLI	在终端执行以下命令	npm install -g expo-cli
3. 创建项目	进入你想放项目的文件夹，运行	npx create-expo-app MyFirstApp

💡 提示：npx 是 Node.js 自带的工具，可以直接运行最新版的 create-expo-app，无需全局安装。

创建完成后，进入项目目录并启动开发服务器：

cd MyFirstApp
npm start

你会看到一个终端窗口弹出，显示一个二维码。这就是你的开发服务器！

---

第二步：理解核心概念（用大白话讲）

在写代码前，先搞懂几个关键概念，避免“照着敲但不知道为什么”。

1. 组件（Component）是什么？

在 React Native 中，一切皆组件。比如一个按钮、一段文字、一个列表，都是独立的组件。你可以把它们像搭积木一样组合起来。

2. JSX 是什么？

JSX 是一种 JavaScript 的语法扩展，看起来像 HTML，但其实是在写 JavaScript。比如：

<Text>Hello World</Text>

这行代码会在屏幕上显示“Hello World”。虽然长得像 HTML 标签，但它会被编译成 React.createElement('Text', {}, 'Hello World')。

3. 样式怎么写？

不能用 CSS！React Native 使用 JavaScript 对象 来定义样式：

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

然后通过 style={styles.container} 应用到组件上。

✅ 小贴士：StyleSheet.create() 不是必须的，但官方推荐使用，能提升性能。

---

第三步：动手实战——构建 Todo 应用

现在，让我们把默认的模板代码删掉，从零开始做一个超简单的待办事项 App。

目标功能：

• 显示一个任务列表
• 输入新任务并添加
• 点击任务可标记为完成（加删除线）

步骤 1：修改 App.js

打开 App.js，替换为以下代码：

import { useState } from 'react';
import { 
  View, 
  Text, 
  TextInput, 
  TouchableOpacity, 
  FlatList, 
  StyleSheet 
} from 'react-native';

export default function App() {
  const [tasks, setTasks] = useState([]);
  const [text, setText] = useState('');

  const addTask = () => {
    if (text.trim() === '') return;
    setTasks([
      ...tasks,
      { id: Date.now().toString(), text: text, completed: false }
    ]);
    setText('');
  };

  const toggleTask = (id) => {
    setTasks(
      tasks.map(task =>
        task.id === id ? { ...task, completed: !task.completed } : task
      )
    );
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity onPress={() => toggleTask(item.id)}>
      <Text style={[
        styles.taskText,
        item.completed && styles.completed
      ]}>
        {item.text}
      </Text>
    </TouchableOpacity>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的待办清单</Text>

      <View style={styles.inputContainer}>
        <TextInput
          style={styles.input}
          value={text}
          onChangeText={setText}
          placeholder="输入新任务..."
        />
        <TouchableOpacity style={styles.addButton} onPress={addTask}>
          <Text style={styles.addButtonText}>+</Text>
        </TouchableOpacity>
      </View>

      <FlatList
        data={tasks}
        renderItem={renderItem}
        keyExtractor={(item) => item.id}
        style={styles.list}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  inputContainer: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    borderRadius: 5,
    marginRight: 10,
  },
  addButton: {
    width: 50,
    height: 50,
    backgroundColor: '#4CAF50',
    borderRadius: 25,
    justifyContent: 'center',
    alignItems: 'center',
  },
  addButtonText: {
    color: 'white',
    fontSize: 24,
    fontWeight: 'bold',
  },
  list: {
    flex: 1,
  },
  taskText: {
    fontSize: 18,
    padding: 15,
    borderBottomWidth: 1,
    borderBottomColor: '#eee',
  },
  completed: {
    textDecorationLine: 'line-through',
    color: '#888',
  },
});

步骤 2：保存并查看效果

保存文件后，Expo 开发服务器会自动刷新。你可以在手机上扫码（用 Expo Go App）或使用模拟器查看效果。

📱 如何在手机上测试？

• 安卓用户：在 Google Play 搜索 “Expo Go” 并安装
• iPhone 用户：在 App Store 搜索 “Expo Go”
• 打开 App，扫描终端中的二维码即可

功能说明（对照代码理解）：

• useState：用来管理状态（比如任务列表和输入框内容）
• FlatList：高效渲染长列表（比直接用 map 更好）
• TouchableOpacity：可点击的容器，点击时有透明反馈
• keyExtractor：告诉列表每个 item 的唯一标识（避免警告）

---

第四步：新手常见问题解答（避坑指南）

❓ 问题1：启动时报错 “Command not found: expo”

原因：Expo CLI 没装成功，或 PATH 未配置。

解决：重新运行 npm install -g expo-cli，如果还不行，试试用 npx expo start 启动。

---

❓ 问题2：手机扫不了码，或者连接不上

可能原因：

• 电脑和手机不在同一 WiFi
• 防火墙阻止了连接
• Expo Go 版本太旧

解决：

1. 确保手机和电脑连同一个网络
2. 在终端按 a（安卓）或 i（iOS）可直接在模拟器运行
3. 更新 Expo Go App

---

❓ 问题3：样式不生效？

常见错误：

• 忘记用 StyleSheet.create
• 写了 style="color: red"（这是 HTML 写法！）
• 没有把 style 属性传给组件

记住：样式必须是对象，且通过 style={styles.xxx} 传递。

---

❓ 问题4：为什么不能用 div 和 span？

React Native 没有 HTML 元素！它使用自己的组件，如：

• <View> ≈ <div>
• <Text> ≈ <span> 或 <p>
• <Image> ≈ <img>

这是为了适配原生 UI，所以不能直接套用 Web 思维。

---

第五步：下一步学习建议

恭喜你！你已经完成了第一个 React Native 应用。但这只是开始。接下来，我建议你：

1. 深入理解状态管理：学习 useReducer 或尝试小型状态库如 Zustand
2. 学习导航：用 @react-navigation/native 实现多页面跳转
3. 连接真实 API：用 fetch 或 axios 获取网络数据
4. 尝试原生模块：当 Expo 能力不足时，可 eject 项目或使用自定义原生代码
5. 参与开源：GitHub 上有很多优秀的 React Native 项目，阅读源码是提升的捷径

🌟 我的经验：不要一开始就追求复杂功能。先做小项目，跑通流程，再逐步叠加。 我维护的几个开源项目，最初版本也就 200 行代码。

---

结语：这是一次技术分享，更是一次邀请

这篇教程是我多年教学和开源经验的综合提炼。我希望它不只是教你“怎么做”，更能让你感受到“原来我可以做到”的信心。

React Native 的世界很广阔，但入口并不高。只要你愿意动手，下一个爆款 App 的开发者，可能就是你。

现在，打开你的终端，敲下第一行代码吧！

作者注：本文所有代码均可在 GitHub 找到（搜索 “react-native-todo-beginner”）。如果你觉得有帮助，欢迎 star 或提 issue，这也是对开源社区最好的支持。