从零开始，用React Native打造你的第一个APP

大家好，我是正在读研的计算机专业学生，平时喜欢在技术博客上分享学习心得。最近有不少学弟学妹问我：“完全没接触过移动端开发，怎么快速上手？”这让我想起自己当初第一次写APP时的迷茫——文档太复杂、环境配置一堆报错、概念听不懂……于是，我决定写这篇真正面向零基础的教程，带你用 React Native 快速做出一个能跑起来的 APP，并顺便聊聊几个最近很火的新工具：Lovable、通义千问和 Bolt.new。

---

为什么选择 React Native？

React Native 是 Facebook（现 Meta）推出的开源框架，它让你用 JavaScript 和 React 的语法写原生移动应用。这意味着：

• 写一套代码，iOS 和 Android 都能跑（大部分情况下）
• 不需要学 Java/Kotlin（Android）或 Swift/Objective-C（iOS）
• 开发体验接近 Web 前端，热重载（改代码立刻看到效果）

我当初就是因为它“像写网页一样写APP”才入坑的，结果一发不可收拾！

---

第一步：搭建开发环境

别怕！虽然网上很多教程把环境配置说得特别复杂，但其实现在有超级简化的方案。

推荐方式：使用 Expo（新手友好）

Expo 是 React Native 的“增强版”，它帮你封装了底层原生配置，你只需要关注 UI 和逻辑。

安装步骤（5分钟搞定）：

1. 确保你已安装 Node.js（v18+）

   • 打开终端，运行 node -v，如果显示版本号就 OK
   • 没装？去 https://nodejs.org 下 LTS 版

2. 全局安装 Expo CLI

   npm install -g @expo/cli
   

3. 创建新项目

   npx create-expo-app MyFirstApp
   cd MyFirstApp
   

4. 启动项目

   npx expo start
   

这时候会弹出一个本地开发服务器页面（通常是 http://localhost:8081）。你有两个选择：

• 用手机扫码预览（推荐）：下载 Expo Go App（iOS/Android 应用商店都有）
• 用电脑模拟器（需额外安装 Android Studio 或 Xcode，新手不建议）

✅ 小贴士：如果你在国内，网络可能较慢，可以设置 npm 镜像：

npm config set registry https://registry.npmmirror.com

---

核心概念：React Native 到底怎么工作？

别被“原生”吓到！其实你只需要理解三个关键点：

1. 组件（Component） = 页面的积木

就像搭乐高，每个按钮、文字、图片都是一个组件。你用 View（容器）、Text（文字）、Image（图片）等基础组件组合成界面。

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

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

注意：这里没有 HTML！div 变成 View，p/span 变成 Text。

2. 样式（Styling） = 用 JS 对象写 CSS

不能写 .css 文件，但你可以用 JavaScript 对象定义样式：

const styles = {
  container: {
    flex: 1,
    backgroundColor: '#fff',
    padding: 20,
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  }
};

// 使用
<Text style={styles.title}>欢迎</Text>

💡 提示：布局默认是“Flexbox”，和 Web 一样，但方向默认是 column（竖着排）！

3. 状态（State） = 让页面动起来

用 useState 让数据变化时自动更新界面：

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

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

  return (
    <View>
      <Text>点击了 {count} 次</Text>
      <Button title="点我" onPress={() => setCount(count + 1)} />
    </View>
  );
}

---

实战项目：做一个简单的待办事项（Todo）APP

现在，我们来动手做一个超迷你 Todo 应用。目标：能添加任务、显示列表。

步骤 1：初始化项目结构

确保你已经用 create-expo-app 创建了项目，并打开 App.js。

步骤 2：编写核心逻辑

替换 App.js 内容如下：

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

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

  const addTask = () => {
    if (text.trim()) {
      setTasks([...tasks, { id: Date.now().toString(), text }]);
      setText(''); // 清空输入框
    }
  };

  const renderTask = ({ item }) => (
    <View style={styles.taskItem}>
      <Text>{item.text}</Text>
    </View>
  );

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的待办事项</Text>
      
      <View style={styles.inputRow}>
        <TextInput
          style={styles.input}
          value={text}
          onChangeText={setText}
          placeholder="输入新任务..."
        />
        <Button title="添加" onPress={addTask} />
      </View>

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#f5f5f5',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
    textAlign: 'center',
  },
  inputRow: {
    flexDirection: 'row',
    marginBottom: 20,
  },
  input: {
    flex: 1,
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginRight: 10,
    borderRadius: 5,
  },
  list: {
    marginTop: 10,
  },
  taskItem: {
    padding: 15,
    backgroundColor: 'white',
    marginBottom: 8,
    borderRadius: 5,
    elevation: 2, // Android 阴影
    shadowColor: '#000', // iOS 阴影
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
  },
});

步骤 3：运行并测试

保存文件后，Expo 会自动刷新。打开 Expo Go 扫码，你应该能看到：

• 顶部标题
• 输入框 + “添加”按钮
• 输入文字后点击按钮，下方出现新任务

🎉 恭喜！你做出了第一个交互式 APP！

---

新手常见问题 & 解决方案

问题	原因	解决办法
启动时报错 Error: EMFILE	Mac/Linux 文件监听数超限	运行 brew install watchman（Mac）或调整系统 limits
手机扫不了码	网络不在同一局域网	用 USB 连接 + npx expo run:android（需 Android Studio）
样式不生效	忘记用 StyleSheet.create 或拼写错误	检查属性名（如 backgroundColor 不是 background-color）
修改代码没反应	热重载被关闭	在 Expo Go 中摇晃手机 → Enable Live Reload

我当初卡在“样式不生效”整整一下午，后来发现是写了 background-color 而不是 backgroundColor……

---

Lovable、通义千问、Bolt.new 是什么？和 React Native 有关系吗？

你可能在社区看到这些新工具，它们不是 React Native 的一部分，但能极大提升开发效率：

工具	用途	对初学者的价值
Lovable	AI 驱动的产品原型工具	快速画出 APP 草图，生成需求文档
通义千问（Qwen）	阿里推出的 AI 大模型	用中文提问，获取代码建议、调试帮助
Bolt.new	一键生成全栈应用的平台	输入描述，自动生成 React/React Native 项目骨架

举个例子：你在写 Todo APP 时卡住了，可以问通义千问：

“如何在 React Native 中用 FlatList 显示动态列表？”

它会给你类似上面的代码示例，甚至解释每行作用！

而 Bolt.new 更激进——你输入“一个带添加功能的待办事项 APP”，它可能直接生成完整项目代码，你只需微调。

⚠️ 注意：这些工具是辅助，不要依赖它们代替学习。理解原理才是长久之计！

---

下一步学习建议

你已经跨过了最难的第一步！接下来可以：

1. 深入 React 基础
   学习 useEffect、props、组件通信等（推荐 React 官方教程）

2. 尝试原生模块
   当 Expo 不够用时，学习 react-native init 创建纯 RN 项目

3. 接入真实 API
   用 fetch 或 axios 获取网络数据，比如做个天气 APP

4. 发布到应用商店
   Expo 提供一键构建 IPA/APK 的服务（eas build）

5. 参与开源
   GitHub 上找 React Native 小项目练手，比如 React Native Elements

---

最后的话

写这篇教程，是因为我相信：每个程序员都曾是小白。React Native 的门槛其实不高，只要你愿意动手敲代码。不要怕报错，不要怕看不懂——我当初连 flex: 1 是什么意思都不知道，现在却能靠它找工作。

记住：完成比完美重要。先做出一个丑丑但能跑的 APP，再慢慢优化。

如果你跟着教程做出了 Todo APP，不妨在评论区告诉我！也欢迎关注我的博客，我会持续更新“从入门到就业”的系列教程。

加油，未来的移动开发者！🚀