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

大家好，我是小林，一名211高校计算机专业的研究生，平时喜欢写技术博客帮助刚入门的开发者。今天这篇教程，就是专门写给完全零基础的朋友——无论你是高中生、转行者，还是刚学完HTML/CSS的新手，只要你对“用JavaScript开发手机App”感兴趣，这篇就够了。

我当初学React Native的时候，踩过无数坑：环境配不对、报错看不懂、文档太抽象……所以我决定写一篇真正“手把手”的入门教程。今天我们不仅会搭建环境、写代码，还会做一个能运行的小App，并且巧妙地把“区块链”和“资源”这两个关键词融入进来（别担心，不会涉及复杂密码学！）。

---

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

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

• 一套代码，双端运行：你写的代码可以同时在iOS和Android上跑。
• 接近原生的性能：不像一些Web App套壳，RN渲染的是真正的原生组件。
• 热更新：改完代码不用重新编译，保存后手机上立刻看到效果！

💡 小知识：国内很多大厂App都用了RN，比如美团、滴滴、腾讯课堂等。

我们今天要做的App叫 “资源链” ——一个展示区块链相关学习资源的列表应用。虽然不涉及真实区块链交互，但会展示“资源”与“区块链”主题的内容，帮你理解如何构建一个真实项目。

---

二、环境准备：5步搭建开发环境

⚠️ 注意：本教程以Windows + Android为例（最常见组合）。Mac用户可类似操作，iOS需Xcode支持。

第1步：安装Node.js

RN依赖Node.js运行JavaScript。去官网 https://nodejs.org 下载LTS版本（推荐v18+），安装时一路“下一步”即可。

验证安装：

node -v  # 应输出如 v18.17.0
npm -v   # 应输出如 9.6.7

第2步：安装Java Development Kit (JDK)

Android开发需要JDK 11或17。推荐使用 Amazon Corretto 或 Oracle JDK。

下载后配置环境变量（Windows）：

• JAVA_HOME → 指向JDK安装目录（如 C:\Program Files\Amazon Corretto\jdk11.0.x）
• 将 %JAVA_HOME%\bin 加入 Path

验证：

java -version
javac -version

第3步：安装Android Studio

去 https://developer.android.com/studio 下载并安装。

安装时勾选：

• Android SDK
• Android SDK Platform
• Performance (Intel ® HAXM)（如果你是Intel CPU）

📌 避坑提示：安装路径不要有中文或空格！建议放在 C:\Android。

第4步：配置Android SDK

打开Android Studio → Settings → Appearance & Behavior → System Settings → Android SDK。

确保以下项已安装：

• SDK Platforms → 勾选 "Show Package Details" → 安装 Android 13 (Tiramisu) 的 SDK Platform 和 Sources
• SDK Tools → 勾选 "Show Package Details" → 安装 NDK (Side by side)、CMake、Android SDK Build-Tools

设置环境变量：

• ANDROID_HOME → C:\Users\<你的用户名>\AppData\Local\Android\Sdk
• 将以下路径加入 Path：
  • %ANDROID_HOME%\platform-tools
  • %ANDROID_HOME%\emulator
  • %ANDROID_HOME%\tools
  • %ANDROID_HOME%\tools\bin

第5步：安装React Native CLI

打开终端（命令提示符或PowerShell），运行：

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

✅ 到此，环境就绪！你可以用以下命令创建新项目了。

---

三、核心概念：用最简单的话讲清楚

在写代码前，先理解三个关键概念：

1. 组件（Component）

RN里一切皆组件。就像搭积木，<View> 是容器，<Text> 是文字，<Image> 是图片。

// 示例：一个简单组件
import React from 'react';
import { View, Text } from 'react-native';

const MyComponent = () => {
  return (
    <View>
      <Text>Hello, 区块链新手！</Text>
    </View>
  );
};

2. 样式（StyleSheet）

不能用CSS！要用RN的StyleSheet.create定义样式：

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    padding: 20,
    backgroundColor: '#f0f0f0'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  }
});

3. 状态（State）

用useState管理数据变化。比如点击按钮改变文字：

import { useState } from 'react';

const [count, setCount] = useState(0);
// 点击时：setCount(count + 1)

💬 我当初总混淆 props 和 state。记住：props是父传子的“输入”，state是组件自己的“记忆”。

---

四、实战项目：构建“资源链”App

现在，让我们一步步做出这个展示区块链学习资源的App！

步骤1：创建项目

npx react-native init ResourceChainApp
cd ResourceChainApp

🕒 首次创建较慢（需下载模板），耐心等待。

步骤2：启动Android模拟器或连接真机

• 模拟器：Android Studio → AVD Manager → 创建Pixel设备 → 启动
• 真机：开启“开发者选项”和“USB调试”，用USB连接电脑

步骤3：运行App

npx react-native run-android

如果看到“Welcome to React Native!”，恭喜！环境成功。

步骤4：编写核心代码

打开 App.js，替换全部内容如下：

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

// 模拟区块链学习资源数据
const resources = [
  {
    id: 1,
    title: '比特币白皮书',
    description: '中本聪撰写的原始论文，区块链的起点',
    category: '区块链基础'
  },
  {
    id: 2,
    title: '以太坊官方文档',
    description: '学习智能合约和DApp开发',
    category: '智能合约'
  },
  {
    id: 3,
    title: 'React Native官方教程',
    description: '用JS构建跨平台App的最佳实践',
    category: '开发资源'
  },
];

const ResourceItem = ({ resource }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{resource.title}</Text>
    <Text style={styles.category}>{resource.category}</Text>
    <Text style={styles.description}>{resource.description}</Text>
  </View>
);

const App = () => {
  return (
    <SafeAreaView style={styles.container}>
      <ScrollView>
        <Text style={styles.header}>📚 资源链：区块链学习资源库</Text>
        {resources.map((item) => (
          <ResourceItem key={item.id} resource={item} />
        ))}
      </ScrollView>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  header: {
    fontSize: 20,
    fontWeight: 'bold',
    textAlign: 'center',
    marginVertical: 16,
    color: '#2c3e50',
  },
  item: {
    padding: 16,
    marginHorizontal: 16,
    marginVertical: 8,
    backgroundColor: '#f8f9fa',
    borderRadius: 8,
    shadowColor: '#000',
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.1,
    shadowRadius: 4,
    elevation: 2, // Android阴影
  },
  title: {
    fontSize: 16,
    fontWeight: '600',
    marginBottom: 4,
    color: '#2980b9',
  },
  category: {
    fontSize: 12,
    color: '#7f8c8d',
    marginBottom: 6,
  },
  description: {
    fontSize: 14,
    color: '#34495e',
    lineHeight: 20,
  },
});

export default App;

步骤5：查看效果

保存文件后，App会自动刷新（热重载）。你应该看到一个清爽的资源列表！

🔍 代码解析：

• resources 数组：模拟从服务器获取的“资源”数据
• ResourceItem：可复用的资源卡片组件
• 使用 ScrollView 实现滚动
• 样式模仿卡片设计，提升阅读体验

---

五、常见问题解答（FAQ）

问题	原因	解决方案
npx react-native run-android 报错	未启动模拟器/真机未连接	先打开模拟器或插上手机
红屏错误 “Unable to load script”	Metro服务未启动	在项目根目录运行 npx react-native start
样式不生效	忘记用 StyleSheet.create	所有样式必须通过 styles.xxx 引用
中文显示乱码	字体问题	一般真机无此问题，模拟器可忽略
修改代码没反应	热重载未开启	摇晃手机 → Enable Fast Refresh

💡 我当初最头疼的是“红屏”。记住：红屏是朋友，不是敌人！它会告诉你哪行代码出错。

---

六、学习建议与下一步

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

1. 深入学习路径

• 官方文档：https://reactnative.dev（英文好就看英文版）
• 状态管理：学习 Context API 或 Redux Toolkit
• 导航：集成 @react-navigation/native 实现多页面跳转
• 网络请求：用 fetch 或 axios 获取真实区块链API数据（如CoinGecko）

2. 扩展“资源链”项目

• 添加“收藏”功能（用 AsyncStorage 存储）
• 接入真实区块链数据（如ETH Gas价格）
• 加入搜索框过滤资源

3. 关于“区块链”的延伸思考

虽然我们的App只是展示资源，但你可以：

• 未来用RN开发钱包界面（如连接MetaMask）
• 构建NFT展示App
• 开发DAO投票工具

🌟 最后送你一句话：编程不是记住语法，而是解决问题的能力。遇到bug别慌，查文档、搜错误、问社区，你一定能行！

---

如果你觉得这篇教程有帮助，欢迎关注我的技术博客（虚构链接：https://lin-cs.blog）。我会持续更新RN、前端、甚至区块链开发的实战教程。下一个App，由你创造！ 🚀