零基础也能上手！React Native第一个APP实战指南

大家好，我是B站技术区UP主「码农小张」，在大厂做移动开发已经三年了。最近收到很多粉丝私信问我：“完全没有前端经验，能学React Native吗？” 我的回答是：当然可以！

我自己当初学的时候，也是从“Hello World”开始的。那时候翻遍了各种书籍和教程，踩了不少坑。今天这篇《React Native快速入门：构建你的第一个APP》，就是我结合自己教学经验，专为零基础同学写的最佳实践总结。哪怕你连JavaScript都没写过，跟着做一遍，也能做出一个真正能在手机上跑的APP！

📝 提示：虽然本文讲的是React Native，但你会发现里面也会提到像 SpringBoot 这样的后端技术——别慌！我们只是简单提一下它和前端的关系，重点还是放在APP开发上。

---

一、React Native 是什么？能用来做什么？

简单说，React Native（简称RN）是一个用JavaScript写原生APP的框架。由Facebook（现Meta）开发，最大的优势是：

• 一套代码，双端运行：写一次，iOS 和 Android 都能用。
• 接近原生的性能：不是网页套壳，而是真正在调用手机原生组件。
• 热更新快：改完代码，手机上立刻看到效果，不用重新编译安装。

举个例子：微信小程序用的是类似思路，但RN更强大，适合做完整APP，比如 Instagram、Tesla 官方APP 都是用RN开发的。

---

二、环境准备：5步搞定开发环境

⚠️ 注意：Windows 用户只能开发 Android；Mac 用户可同时开发 iOS 和 Android。

第1步：安装 Node.js

去 https://nodejs.org 下载 LTS 版本（长期支持版），安装时一路“下一步”即可。

验证是否成功：

node -v
npm -v

看到版本号就说明装好了。

第2步：安装 JDK（Java 开发工具包）

RN 依赖 Java 构建 Android 应用。推荐安装 JDK 11（不要用最新版，容易出兼容问题）。

下载地址：Oracle JDK 11 或使用 OpenJDK。

安装后配置环境变量（Windows 用户尤其注意）：

• JAVA_HOME 指向 JDK 安装目录
• 把 %JAVA_HOME%\bin 加入 PATH

验证：

java -version

第3步：安装 Android Studio（仅Android开发需要）

1. 下载 Android Studio
2. 安装时勾选 Android SDK、Android SDK Platform、Performance (Intel ® HAXM) 等默认选项
3. 安装完成后，打开 SDK Manager → 确保安装了 Android 13 (API Level 33) 或更高
4. 设置环境变量 ANDROID_HOME（路径通常是 C:\Users\你的用户名\AppData\Local\Android\Sdk）

第4步：安装 React Native CLI

npm install -g @react-native-community/cli

❗ 不要使用旧的 react-native-cli，那是废弃的！

第5步：创建你的第一个项目

npx react-native init MyFirstApp
cd MyFirstApp

这个命令会自动下载模板、安装依赖，耐心等几分钟。

---

三、核心概念：3个关键词搞懂 RN

1. 组件（Component）

RN 的页面是由一个个“积木块”拼起来的，每个积木就是一个组件。比如 <Text> 显示文字，<View> 相当于 HTML 的 <div>。

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

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

export default App;

2. 样式（StyleSheet）

RN 用 JavaScript 对象写样式，不是 CSS！但逻辑类似。

import { StyleSheet } from 'react-native';

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

3. 状态（State）

想让APP动起来？用 useState！这是 React 的核心概念。

import { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

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

💡 我当初学的时候，花了半天才理解“状态变了，界面自动更新”这个魔法，其实就是 React 的响应式机制！

---

四、实战：做一个“待办事项”APP

我们来做一个超简单的 Todo List，包含添加和显示功能。

步骤1：替换 App.js 内容

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

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

  const addTodo = () => {
    if (text.trim()) {
      setTodos([...todos, { id: Date.now(), text }]);
      setText('');
    }
  };

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

      <ScrollView style={styles.list}>
        {todos.map(todo => (
          <View key={todo.id} style={styles.todoItem}>
            <Text>{todo.text}</Text>
          </View>
        ))}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, backgroundColor: '#f5f5f5' },
  title: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', marginBottom: 20 },
  inputContainer: { flexDirection: 'row', marginBottom: 20 },
  input: { flex: 1, borderWidth: 1, borderColor: '#ccc', padding: 10, marginRight: 10 },
  list: { flex: 1 },
  todoItem: { padding: 15, backgroundColor: '#fff', marginBottom: 10, borderRadius: 5 },
});

export default App;

步骤2：运行到手机或模拟器

• Android（连接手机或开模拟器）：

  npx react-native run-android
  

• iOS（Mac only）：

  npx react-native run-ios
  

✅ 如果一切顺利，你会看到一个可以输入、添加任务的APP！恭喜你，已经跨出了第一步！

---

五、新手常见问题 & 解决方案

问题现象	可能原因	解决方法
Command failed: gradlew.bat	JDK版本不对或环境变量未配	用 JDK 11，检查 JAVA_HOME
手机连不上开发服务器	网络不在同一WiFi	确保电脑和手机在同一局域网，或用USB调试
修改代码没反应	Metro 服务没启动	在项目根目录运行 npx react-native start
iOS 报错 flipper	新版RN的调试工具冲突	暂时删除 ios/Podfile 中 flipper 相关行，重装 pods

🛠️ 小技巧：遇到报错，先看终端红色错误信息，90%的问题都能通过 Google 错误关键词解决。

---

六、学习建议：下一步怎么走？

你已经完成了第一个APP！接下来，我建议按这个路径深入：

1. 巩固 JavaScript 基础
   推荐书籍：《JavaScript高级程序设计（第4版）》——别被“高级”吓到，前8章足够入门。

2. 学习 React 核心概念
   官方文档 react.dev 写得非常友好，重点掌握：组件、props、state、useEffect。

3. 接入真实后端（比如 SpringBoot）
   虽然你现在只做了前端，但实际APP都需要和服务器通信。你可以用 SpringBoot 写个简单 REST API（比如 /api/todos），然后用 fetch 或 axios 在RN中调用它。这一步能让你理解前后端如何协作。

4. 尝试发布到应用商店
   学完基础后，试着把你的Todo APP打包成 APK 或 IPA，上传到测试平台（如 TestFlight 或 蒲公英）。

5. 关注性能与调试
   学会用 React DevTools、Flipper 等工具分析卡顿、内存泄漏等问题。

---

最后的话

我当初学 RN 的时候，也觉得“组件”“状态”“JSX”这些词很玄乎。但只要动手写代码，哪怕只是改一行字、加一个按钮，你就会慢慢理解它们。

编程不是背概念，而是解决问题的过程。你的第一个APP可能很简单，但它代表你迈出了从“用户”到“创造者”的关键一步。

如果你觉得这篇教程对你有帮助，欢迎去B站搜“码农小张”，我会持续更新更多 React Native 实战内容。下期我们讲：《用 SpringBoot + React Native 搭建全栈待办系统》！

加油，未来的开发者！🚀