React Native快速入门：构建你的第一个APP

大家好，我是阿杰，一名在大厂干了3年移动开发的工程师，业余时间也在B站做技术UP主。最近收到不少粉丝私信，说想学跨平台开发但不知道从哪下手。我当初学的时候，也是一头雾水：React？Native？JSX？这些词堆在一起简直像天书。所以今天，我就手把手带你用最简单的方式，做出你的第一个 React Native 应用！

📌 小提示：虽然标题提到了“区块链”“SpringBoot”等关键词，但它们和 React Native 并非直接相关。我会在文末的「综合」部分解释它们在整个产品开发链条中的位置，帮助你建立全局视野。

---

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

React Native（简称 RN） 是 Facebook 开源的一个框架，它让你用 JavaScript + React 的语法，写出能在 iOS 和 Android 上同时运行的原生级 App。

• ✅ 一套代码，双端运行（省时省力）
• ✅ 接近原生的性能和体验
• ✅ 热重载（改完代码立刻看到效果，不用重新编译）

我当初学 RN 的最大动力就是：不用同时学 Swift（iOS）和 Kotlin（Android），用熟悉的前端思维就能做 App！

---

二、环境准备：5 分钟搭好开发环境

我们推荐使用 Expo 来快速启动项目——它封装了复杂的原生配置，特别适合新手。

步骤 1：安装 Node.js

去 https://nodejs.org 下载 LTS 版本（目前是 20.x），安装即可。

验证是否成功：

node -v
npm -v

步骤 2：安装 Expo CLI

npm install -g expo-cli

步骤 3：创建你的第一个项目

expo init MyFirstApp

选择模板 → 推荐选 blank (TypeScript)（带类型检查更安全）

进入项目并启动：

cd MyFirstApp
npm start

这时会打开一个浏览器窗口（Expo Dev Tools）。用手机下载 “Expo Go” App（iOS/Android 应用商店都有），扫码即可在真机上实时预览！

💡 避坑指南：不要一上来就用 react-native init！那会涉及 Android Studio/Xcode 配置，对新手极不友好。先用 Expo 快速体验，后面再深入原生模块。

---

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

1. 组件（Component）

RN 的 UI 由一个个“组件”拼起来，比如 <View> 相当于 HTML 的 <div>，<Text> 就是文字。

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>
  );
}

2. 样式（StyleSheet）

不能写 CSS！要用 JavaScript 对象定义样式：

import { StyleSheet } from 'react-native';

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

然后这样用：<View style={styles.container}>

3. 状态（State）

想让页面“动起来”？用 useState！

import { useState } from 'react';

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

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

✅ 关键理解：RN = React（声明式 UI + 状态管理） + 原生能力（摄像头、GPS 等）

---

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

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

第 1 步：修改 App.tsx

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

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

  const addTodo = () => {
    if (text.trim()) {
      setTodos([...todos, text]);
      setText(''); // 清空输入框
    }
  };

  return (
    <View style={styles.container}>
      <Text style={styles.title}>我的待办事项</Text>
      
      <TextInput
        style={styles.input}
        value={text}
        onChangeText={setText}
        placeholder="输入任务..."
      />
      
      <Button title="添加任务" onPress={addTodo} />
      
      <FlatList
        data={todos}
        renderItem={({ item }) => <Text style={styles.todoItem}>✅ {item}</Text>}
        keyExtractor={(item, index) => index.toString()}
      />
      
      <StatusBar style="auto" />
    </View>
  );
}

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

第 2 步：保存文件，Expo 会自动刷新！

现在你可以在手机上：

• 输入任务
• 点击“添加任务”
• 看到列表实时更新！

🎯 恭喜你！ 这已经是具备完整交互逻辑的 App 了。

---

五、常见问题解答（新手必看）

问题	原因	解决方案
扫码后白屏或报错	网络问题或 Expo 版本不匹配	确保手机和电脑在同一 Wi-Fi；升级 Expo Go 到最新版
修改代码没反应	热重载被关闭	在 Expo Dev Tools 点击 “Restart” 或按 r 键
样式不生效	写了 CSS 而不是 JS 对象	检查是否用了 StyleSheet.create
想用相机/蓝牙等原生功能	Expo 默认不包含所有原生模块	后期可“eject”项目或使用 expo install 安装特定库

---

六、综合视角：RN 在产品开发中的位置

你可能会疑惑：文章开头提到的 区块链、SpringBoot、产品 和 RN 有什么关系？

其实，一个完整的 产品 开发通常包含以下环节：

用户界面（前端） ←→ 后端服务 ←→ 数据库/区块链
       ↑
   React Native

• React Native：负责用户看到的 App 界面（前端）
• SpringBoot：常用于构建后端 API 服务（比如用户登录、数据存储）
• 区块链：某些产品（如数字藏品、去中心化应用）会把关键数据存在链上
• 综合：你需要根据产品需求，选择合适的技术组合

举个例子：
你想做个“NFT 展示 App”——

• 用 React Native 做移动端界面
• 用 SpringBoot 提供用户系统和元数据接口
• 用 区块链（如 Ethereum）存 NFT 所有权记录

所以，RN 只是整个产品拼图中的一块。但作为入口，它是用户最先接触的部分，非常重要！

---

七、下一步学习建议

1. 巩固基础：多写几个小项目（天气 App、记账本等）
2. 学导航：安装 @react-navigation/native 实现页面跳转
3. 连后端：用 fetch 调用 SpringBoot 接口（模拟即可）
4. 进阶原生：当需要深度定制时，再学习原生模块开发
5. 关注生态：Recoil（状态管理）、React Query（数据请求）等工具

🔔 最后提醒：不要试图一次性学完所有东西！我当初就是卡在“要不要学 TypeScript”“Redux 还是 Context”上浪费了两周。先跑起来，再优化，才是高效学习之道。

---

如果你觉得这篇教程有帮助，欢迎去 B站 搜“阿杰学开发”，我会持续更新 React Native 实战系列！下期我们讲《用 RN + SpringBoot 做一个完整的用户登录系统》。

动手敲代码吧，你的第一个 App 已经在路上了！🚀