React Native 入门没那么难：手把手教你做出人生第一个APP

大家好，我是一名从培训班出来的前端开发工程师。记得我当初学 React Native 的时候，光是环境配置就折腾了三天，文档看不懂、报错看不懂、连“JSX 是啥”都要查半天。后来当了讲师，看到很多零基础的同学卡在同样的地方——不是技术太难，而是没人用他们能听懂的话讲清楚。

今天这篇教程，就是专门写给完全没接触过移动开发的你。我会用最直白的语言、最少的术语、最多的实操，带你从零做出一个能在手机上运行的 APP。顺便说一句，这个小项目还能放进你的简历里，成为你前端求职路上的第一块敲门砖！

---

为什么选 React Native？

React Native（简称 RN）是 Facebook 推出的一套框架，它让你用前端技术（JavaScript + React）来开发原生 iOS 和 Android 应用。

• 你会 HTML/CSS/JS？ 那你已经会了一半！
• 不用分别学 Swift（iOS）和 Kotlin（Android），一套代码两头跑。
• 热重载（Hot Reload）：改完代码，手机上立刻看到效果，不用反复编译。

💡 我当初就是因为不想学两套语言，才一头扎进 RN 的。结果发现，前端技能在这里特别吃香！

---

第一步：搭好你的开发环境

别怕！虽然网上有人说“RN 环境配置很坑”，但其实只要按步骤来，问题不大。我们用官方推荐的 Expo 方式，它把复杂的东西都封装好了，特别适合新手。

你需要准备：

工具	作用	安装方式
Node.js (>=18)	运行 JavaScript 的环境	官网下载安装
npm 或 yarn	包管理工具（Node 自带 npm）	安装 Node 后自动拥有
手机（iOS 或 Android）	用来预览你的 APP	安装 Expo Go App

安装步骤（5 分钟搞定）

1. 打开终端（Mac）或命令提示符（Windows）
2. 全局安装 Expo CLI：

   npm install -g @expo/cli
   

3. 创建新项目：

   npx create-expo-app MyFirstApp
   cd MyFirstApp
   

4. 启动开发服务器：

   npx expo start
   

5. 用手机扫描终端里出现的二维码（需提前安装 Expo Go App）

✅ 小贴士：如果你在国内，建议使用淘宝镜像加速 npm install，否则可能慢到怀疑人生。

---

核心概念：RN 到底怎么写界面？

RN 不用 HTML，但它有类似的“标签”，叫 组件（Components）。比如：

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

样式也不用 CSS 文件，而是用 JavaScript 对象来写。

示例：写一个“Hello World”页面

打开项目里的 App.js，替换成以下代码：

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

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

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f0f0f0',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  }
});

保存后，手机上的 Expo Go 会自动刷新，立刻看到效果！

🤔 为什么用 StyleSheet.create？
这是为了性能优化。直接写 { fontSize: 24 } 也可以，但每次渲染都会创建新对象。用 StyleSheet 只创建一次，更高效。

---

实战：做一个“待办事项”小应用

现在我们来做一个超简单的 Todo List，练练手！

步骤 1：定义状态（State）

我们需要记录用户输入的内容和已添加的事项列表。用 useState：

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

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

  // 添加事项
  const addTodo = () => {
    if (text.trim()) {
      setTodos([...todos, { id: Date.now().toString(), value: text }]);
      setText(''); // 清空输入框
    }
  };

  return (
    // 界面部分（下一步写）
  );
}

步骤 2：搭建界面

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

    {/* 输入框 */}
    <TextInput
      style={styles.input}
      placeholder="输入任务..."
      value={text}
      onChangeText={setText}
    />

    {/* 添加按钮 */}
    <Button title="添加" onPress={addTodo} />

    {/* 列表 */}
    <FlatList
      data={todos}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => <Text style={styles.todoItem}>• {item.value}</Text>}
    />
  </View>
);

步骤 3：加上样式

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    paddingHorizontal: 20,
    backgroundColor: '#fff',
  },
  title: {
    fontSize: 28,
    fontWeight: 'bold',
    textAlign: 'center',
    marginBottom: 20,
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    marginBottom: 10,
    borderRadius: 5,
  },
  todoItem: {
    fontSize: 18,
    paddingVertical: 8,
  }
});

保存后，你就能在手机上输入文字、点“添加”，看到任务列出来了！

✅ 这个 Demo 虽然简单，但已经包含了 RN 开发的核心流程：状态管理 + 组件渲染 + 用户交互。把它放到你的 GitHub 和简历里，绝对比“熟悉 HTML/CSS”更有说服力！

---

新手常踩的坑 & 解决方案

❌ 问题1：改了代码，手机没更新？

• 原因：可能关掉了“自动刷新”。
• 解决：在 Expo Go 里摇一摇手机（iOS）或按菜单键（Android），确保 “Live Reload” 或 “Hot Reload” 是开启的。

❌ 问题2：<View> 里不能直接放文本？

• RN 规定：所有文字必须包裹在 <Text> 里。不能这样写：

  <View>错误：这里不能直接写文字</View>
  

  必须：

  <View><Text>正确写法</Text></View>
  

❌ 问题3：样式不生效？

• RN 的样式不支持 margin: "10px"，必须写成数字：margin: 10
• 也不支持 class 或 id，只能用 style={styles.xxx}

❌ 问题4：真机调试连不上？

• 确保电脑和手机在同一个 Wi-Fi 下
• 如果还是不行，试试在终端按 a（Android）或 i（iOS）用模拟器

---

学完这个，下一步该学什么？

你现在已经有能力做出一个可运行的 APP 了！但这只是开始。为了真正拿得出手、放进简历、找到工作，建议你继续：

1. 学 React 基础：组件、props、state、生命周期（或 Hooks）
2. 掌握常用组件：ScrollView, TouchableOpacity, Modal, Alert 等
3. 学习导航（Navigation）：用 @react-navigation/native 实现多页面跳转
4. 尝试调用 API：用 fetch 获取网络数据，做新闻列表或天气 APP
5. 发布到应用商店：Expo 提供一键构建 .apk 或 .ipa 的功能

💬 我带过的学生里，最快的一个两周后就把 Todo App 升级成记账本，投简历时直接展示手机上的成品，当天就拿到了面试机会。

---

最后说两句

React Native 的魅力在于：你不需要成为 iOS 或 Android 专家，也能做出原生体验的 APP。作为从前端培训班出来的开发者，我深知“做出第一个能跑的东西”对信心有多重要。

所以，别被文档吓住，别被报错劝退。先跑起来，再优化；先做出来，再完美。你的第一个 APP 不需要多酷，但一定要是你亲手写的。

现在，打开终端，敲下那几行命令吧。等你的手机屏幕上跳出“你好，React Native！”的时候，你就已经超越了 80% 只看不练的新手。

加油！你的前端简历，正等着这个 APP 来点亮呢 ✨