React Native快速入门：构建你的第一个APP
大家好，我是一名工作5年的后端开发工程师。虽然主职是写服务端代码，但这些年也带过不少新人做全栈项目。最近常有朋友问我：“能不能用 JavaScript 写手机 App？”答案是：当然可以！而最主流的选择之一，就是 React Native。
我当初学的时候，被各种“原生”、“桥接”、“JS 引擎”这些词绕得晕头转向。其实，它没那么复杂——你可以把它理解成：用写网页的方式，写出能跑在手机上的 App。今天这篇教程，我就用最直白的语言，带你从零开始，亲手做出你的第一个 React Native 应用。
📌 重点提醒：本文虽为入门，但会融入最佳实践，避免你走我当年踩过的坑。
一、什么是 React Native？
React Native（简称 RN）是由 Facebook 开源的一套跨平台移动开发框架。它允许你使用 JavaScript + React 的语法，同时构建 iOS 和 Android 应用。
- 不是“网页套壳”（像早期的 Cordova）
- 真正调用原生组件（按钮、文本框等都是系统原生的）
- 一套代码，两平台运行（iOS + Android）
💡 类比：如果你会做披萨（React），那 React Native 就是教你用同样的配方，在意大利和纽约同时开分店（iOS 和 Android）。
二、环境准备：5 分钟搭好开发工具
别怕！现在官方提供了超简单的工具链。我们只需要安装以下两个核心工具：
| 工具 | 作用 | 安装命令 |
|---|---|---|
| Node.js | 运行 JavaScript 的环境 | 官网下载（选 LTS 版） |
| Expo CLI | 快速启动 RN 项目的脚手架工具 | npm install -g expo-cli |
✅ 建议：新手强烈推荐使用 Expo！它封装了原生配置，让你专注写业务逻辑，不用碰 Xcode 或 Android Studio。
验证安装
node -v # 应输出 v18.x 或更高
npm -v # 应输出 8.x 或更高
expo --version # 应输出 6.x 或更高
创建你的第一个项目
expo init MyFirstApp
# 选择 "blank (TypeScript)" 模板（更规范）
cd MyFirstApp
npm start
此时会打开一个浏览器窗口（Metro 打包器），并提示你用手机扫码预览。
📱 在手机上安装 Expo Go App（iOS/Android 应用商店搜索），扫码即可实时看到你的 App！
三、核心概念：3 个必须懂的关键词
1. 组件（Component）
RN 中一切皆组件。就像搭积木，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>
);
}
🔍 注意：这里用的是
react-native里的View和Text，不是 HTML 的<div>和<p>！
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'
}
});
// 使用：style={styles.container}
3. 状态（State）
用 useState 控制数据变化，自动更新界面。
import { useState } from 'react';
export default function Counter() {
const [count, setCount] = useState(0);
return (
<View>
<Text>点击了 {count} 次</Text>
<Button title="点我" onPress={() => setCount(count + 1)} />
</View>
);
}
四、实战项目：做一个“笑话爬虫”小工具
既然你提到了 爬虫 和 工具，我们就做一个实用的小 App：从公开 API 获取随机笑话，并展示出来。
⚠️ 注意：真正的“爬虫”通常指抓取网页内容，但在移动端受限于安全策略，一般通过调用公开 API 获取数据。这在实际开发中更常见、更合规。
步骤 1：安装网络请求库
npm install axios
步骤 2：编写获取笑话的函数
我们使用免费 API：https://official-joke-api.appspot.com/random_joke
import axios from 'axios';
import { useState, useEffect } from 'react';
import { View, Text, Button, ActivityIndicator } from 'react-native';
export default function JokeApp() {
const [joke, setJoke] = useState(null);
const [loading, setLoading] = useState(false);
const fetchJoke = async () => {
setLoading(true);
try {
const res = await axios.get('https://official-joke-api.appspot.com/random_joke');
setJoke(res.data);
} catch (error) {
console.error(error);
alert('获取失败，请重试');
} finally {
setLoading(false);
}
};
// 首次加载时获取一条笑话
useEffect(() => {
fetchJoke();
}, []);
return (
<View style={{ flex: 1, padding: 20, justifyContent: 'center' }}>
{loading ? (
<ActivityIndicator size="large" />
) : joke ? (
<>
<Text style={{ fontSize: 18, marginBottom: 20 }}>{joke.setup}</Text>
<Text style={{ fontSize: 16, fontStyle: 'italic' }}>{joke.punchline}</Text>
<Button title="换一个" onPress={fetchJoke} />
</>
) : null}
</View>
);
}
步骤 3：替换 App.tsx 内容
把上面的 JokeApp 组件设为默认导出，保存后 Expo 会自动刷新！
✅ 恭喜！你刚刚完成了一个具备网络请求能力的工具型 App！
五、新手常见问题 & 避坑指南
| 问题 | 原因 | 解决方案 |
|---|---|---|
| 扫码后白屏或报错 | 网络问题或 IP 地址不匹配 | 确保电脑和手机在同一 WiFi；在 Metro 窗口按 i 或 a 用模拟器 |
| 修改代码没反应 | 缓存未清除 | 在 Metro 窗口按 r 刷新，或重启 npm start |
| 样式不生效 | 写了 CSS 语法（如 margin-top） |
必须用驼峰命名：marginTop |
| 真机调试卡顿 | 开发模式性能较低 | 发布正式版会快很多，开发时忍一忍 |
🛑 重要提醒：不要在 RN 里直接写
document.getElementById—— 这是浏览器 API，手机里没有！
六、下一步学习建议
你已经迈出了关键一步！接下来建议：
- 深入学习 React 基础：Hooks（
useEffect,useContext）、组件通信 - 尝试导航：安装
@react-navigation/native实现多页面跳转 - 本地存储：用
AsyncStorage保存用户偏好 - 真机发布：学习如何打包成
.apk或提交到 App Store - 探索原生模块：当 Expo 能力不够时，再接触原生开发
💬 我当初花了两周才搞懂样式布局，但坚持下来后，现在三天就能搭出一个 MVP。编程不是比谁聪明，而是比谁愿意多试一次。
结语
今天我们用不到 100 行代码，做出了一个能联网、能交互、能在手机上运行的工具 App。虽然它简单，但背后是完整的移动开发生态：组件化思想 + 网络请求 + 状态管理。
记住：所有复杂的 App，都是从 “Hello World” 开始的。你现在拥有的，不是一个笑话 App，而是一把打开移动开发大门的钥匙。
快去试试吧！遇到问题，欢迎在评论区留言——就像当年有人帮我一样，我也乐意拉你一把。
评论 0