React Native入门必看：零基础搭建第一个移动应用-平芜编程栈

从零开始：用 React Native 写你的第一个跨平台 App

你有没有过这样的念头？——“我想做个 App，但不会 Java 或 Swift，学起来太慢。”
别急。今天，我们就来干一件“不务正业”的事：一个熟悉网页开发的人，如何在半天内做出能在手机上跑的原生级应用。

答案就是：React Native + Expo。
不是 H5 套壳，也不是性能孱弱的 Hybrid 方案，而是真正能调用摄像头、获取定位、发布到应用商店的移动 App。

更重要的是：如果你会写 React，那你已经会了一大半。

为什么是 React Native？

先说个现实：现在没人愿意同时维护两套代码（iOS 和 Android）。成本太高，迭代太慢。

而 React Native 的出现，就像给前端开发者打开了一扇新门——
它不靠 WebView 渲染页面，而是把<View>变成UIView（iOS）或android.view.View（Android），把<Text>变成原生文本控件……
换句话说：你写的 JSX，最终变成了真正的原生组件。

这背后靠的是“桥接”机制（Bridge），虽然老架构因为异步通信有过性能争议，但如今Fabric 渲染器 + TurboModules已经让通信更高效，体验也更加流畅。

所以它的优势很明确：

✅ 使用 JavaScript / TypeScript 开发
✅ 一套代码跑双端
✅ 热重载（改完立马看效果）
✅ 组件化思维，前端友好
✅ 能访问原生功能（相机、GPS、蓝牙等）

尤其适合 MVP 验证、创业团队、或者想快速上手移动端的 Web 工程师。

别折腾环境了，用 Expo 直接起飞

很多人被劝退的第一步，就是配置 Android Studio、Xcode、SDK、签名……
但其实，初学者根本不需要碰这些。

Expo 就是为了让你跳过所有复杂配置而生的。你可以把它理解为：“React Native 的增强版脚手架”，内置了一整套工具链和云服务。

只需要三步，就能看到你的 App 在手机上运行：

# 1. 安装 CLI npm install -g @expo/cli # 2. 创建项目（支持 TS） npx create-react-native-app MyFirstApp --template typescript # 3. 启动开发服务器 cd MyFirstApp && npm run start

执行后终端会出现一个二维码，拿出手机，安装Expo GoApp（App Store / Google Play 都有），扫码即可实时预览！

🧠 小贴士：确保电脑和手机在同一 Wi-Fi 下，否则连不上 Metro 打包服务。

这种方式叫Managed Workflow（托管模式），你不用写一行原生代码，也能使用相机、通知、文件系统等功能。等到真要发布时，还能通过 EAS Build 在云端打包 APK 或 IPA，彻底告别本地编译烦恼。

构建界面：这几个组件必须会用

React Native 没有 DOM，但它有一套对应的 UI 组件系统。以下是新手必须掌握的核心成员。

View：万能容器

相当于 HTML 中的div，用来组织布局结构。

<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}> <Text>Hello World</Text> </View>

注意：不能直接在 View 里写字符串，必须包裹在<Text>里，否则报错。

Text：显示文字专用

所有文本内容都得用它，而且样式只能作用于 Text 自身，不像 Web 那样可以继承。

<Text style={{ fontSize: 18, color: 'blue' }}>这是一段蓝色文字</Text>

还可以嵌套以实现不同样式的混合排版：

<Text> 正常文字 <Text style={{ fontWeight: 'bold' }}>加粗部分</Text> 又变回普通 </Text>

Image：加载图片的三种方式

支持本地资源、网络图和 Base64。

// 本地图片 <Image source={require('./assets/icon.png')} style={{ width: 50, height: 50 }} /> // 网络图片（必须声明尺寸！） <Image source={{ uri: 'https://example.com/avatar.jpg' }} style={{ width: 100, height: 100 }} /> // Base64 图像 <Image source={{ uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUh...' }} style={{ width: 64, height: 64 }} />

⚠️ 常见坑点：网络图片不显示？多半是因为没设宽高，RN 不会自动计算。

按钮怎么搞？Button vs TouchableOpacity

React Native 提供了一个基础Button组件，样式固定但兼容性好：

<Button title="点击我" onPress={() => alert('Pressed!')} />

但如果你想自定义样式，就得用TouchableOpacity：

<TouchableOpacity onPress={() => console.log('clicked')}> <View style={{ backgroundColor: 'green', padding: 10, borderRadius: 5 }}> <Text style={{ color: 'white' }}>绿色按钮</Text> </View> </TouchableOpacity>

轻触时透明度会降低，提供视觉反馈，是构建自定义交互的首选。

样式管理：StyleSheet.create 是最佳实践

虽然可以直接写内联样式，但推荐使用StyleSheet对象，原因有三：

性能更好（会被原生层优化）
支持类型检查（TS 友好）
更清晰的样式组织方式

import { StyleSheet } from 'react-native'; const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', padding: 20, }, title: { fontSize: 24, fontWeight: 'bold', textAlign: 'center' } });

布局方面完全依赖Flexbox，和 CSS 几乎一致，所以如果你懂网页布局，那这里毫无压力。

让页面动起来：状态与用户输入

静态页面谁都会做，关键是要响应用户的操作。

使用 useState 管理状态

和 React 一模一样，函数组件中用useState来驱动视图更新。

import React, { useState } from 'react'; import { Button, Text, View } from 'react-native'; const Counter = () => { const [count, setCount] = useState(0); return ( <View style={{ padding: 20 }}> <Text>当前计数: {count}</Text> <Button title="增加" onPress={() => setCount(count + 1)} /> </View> ); };

每次点击按钮，setCount触发重新渲染，数字就会实时变化。

获取用户输入：TextInput

类似 HTML 的 input，但在 RN 中需要手动绑定值和事件。

import { TextInput } from 'react-native'; const InputExample = () => { const [text, setText] = useState(''); return ( <TextInput style={{ height: 40, borderColor: 'gray', borderWidth: 1, margin: 10, paddingHorizontal: 10 }} placeholder="请输入内容" value={text} onChangeText={setText} /> ); };

这里的onChangeText相当于 Web 中的onInput，实现双向绑定的关键。

项目结构长什么样？

初始化完成后，你会看到这样一个目录：

MyFirstApp/ ├── App.tsx # 主入口 ├── components/ # 可复用组件 ├── screens/ # 页面级组件（可选） ├── assets/ # 图片、字体等资源 ├── navigation/ # 路由配置（需额外安装） ├── package.json └── tsconfig.json

其中App.tsx是根组件，通常你会在这里引入导航器或主页面。

如果要做多页面跳转，建议搭配React Navigation库（社区事实标准）：

npx expo install @react-navigation/native @react-navigation/stack

然后就可以实现页面堆栈、标签页、抽屉菜单等常见交互模式。

实战避坑指南：那些没人告诉你的事

刚入门最容易卡住的地方，往往不是语法，而是莫名其妙的问题。下面这几个“血泪经验”请收好。

黑屏/白屏怎么办？

最常见的原因是语法错误导致 JS 异常中断，比如：
- 导出组件写成了export default function() {}却忘了命名
- JSX 中写了非法表达式（如{null}当作子元素）

解决办法：
1. 查看终端是否有红字报错
2. 打开调试菜单（摇手机或 Cmd+D），选择 “Debug Remote JS” 查看控制台
3. 使用严格模式，在tsconfig.json中开启"strict": true

图片死活加载不出来？

确认以下几点：
- 本地图片路径是否正确？require('../assets/icon.png')
- 网络图片有没有设置宽高？
- HTTPS 是否受信任？某些安卓机对非安全链接有限制

真机连不上开发服务器？

确保手机和电脑在同一 Wi-Fi
关闭防火墙或杀毒软件干扰
尝试重启 Metro 服务：npm run start -- --reset-cache

也可以临时切换成 USB 连接（仅 Android）：

adb reverse tcp:8081 tcp:8081

样式不起作用？

记住一条铁律：优先使用 StyleSheet.create，避免频繁创建对象影响性能。

错误示范：

<Text style={{ color: 'red' }}>这样写没问题，但别滥用</Text>

正确做法：

const styles = StyleSheet.create({ redText: { color: 'red' } }); <Text style={styles.redText}>这才是推荐方式</Text>

写在最后：你离上线只差一步

到现在为止，你应该已经完成了：
- 环境搭建 ✔️
- 第一个界面 ✔️
- 用户交互 ✔️
- 真机预览 ✔️

接下来呢？

发布你的 App

当你准备好了，可以用 EAS Build 打包正式版本：

# 先登录 npx eas-cli login # 构建 Android 包 npx eas build -p android # 或 iOS npx eas build -p ios

EAS 会在云端帮你完成编译，生成可用于发布的 APK 或 IPA 文件，提交到各大应用市场即可。

学完下一步学什么？

导航系统：掌握 Stack / Tab / Drawer 导航
状态管理：Redux Toolkit 或 Zustand 处理全局状态
网络请求：fetch / axios 调用 API
主题与适配：Dark Mode、屏幕旋转、多语言支持
原生模块扩展：当 Expo 不够用时，切入 Bare Workflow 自定义原生逻辑

结语

React Native 不是银弹，但它确实为前端开发者打开了一扇通往移动端的大门。

它不要求你精通 Objective-C 或 Kotlin，也不强迫你忍受缓慢的编译流程。
相反，它让你用熟悉的语言、熟悉的思维模型，去创造真正运行在用户手中的产品。

技术关键词回顾：React Native、Expo、热重载、原生渲染、组件化、Flexbox、状态管理、跨平台开发、TypeScript、移动端入门……

这些词你现在可能还觉得陌生，但只要迈出第一步——
运行那个npx create-react-native-app，你就已经在路上了。

别等了，打开终端，敲下第一行命令吧。
几个小时后，你手机上的那个小 App，就是你移动开发旅程的起点。

🚀 欢迎入坑。

React Native入门必看：零基础搭建第一个移动应用