如何学习 react native 和 Expo
·
推荐学习顺序:
-
掌握 React Native 核心组件(视图、文本、样式、交互)
-
学会使用
react-navigation跳转页面 -
学习 Expo 常用模块(如图片、通知、存储)
-
尝试项目开发 + 真机测试(Expo Go)
-
理解 build / 打包流程(EAS Build)
🟢 第一部分:React Native 核心 API(重点是“基础开发能力”)
| 类别 | 关键 API | 用途 |
|---|---|---|
| 📦 布局 | View、ScrollView、SafeAreaView | 布局容器、滚动区域、适配 iPhone X 等异形屏 |
| 🖼️ 展示 | Text、Image | 显示文本、图片 |
| 🧭 导航 | react-navigation:Stack.Navigator、Tab.Navigator | 页面跳转、顶部/底部导航 |
| 🧮 样式 | StyleSheet.create | 创建样式对象,类似 CSS |
| 🔠 输入 | TextInput、KeyboardAvoidingView | 表单输入、软键盘适配 |
| ⬆️ 列表 | FlatList、SectionList | 渲染大量数据列表 |
| ⚙️ 状态 | useState、useEffect、useRef、useContext | React 核心 Hooks |
| ✋ 手势 | TouchableOpacity、Pressable | 按钮点击、手势反馈 |
| 🌀 动画 | Animated(或 Reanimated) | 控制组件过渡、动效 |
| 📲 平台 | Platform、Dimensions | 判断平台(iOS/Android)和设备尺寸 |
| 🔒 权限 | PermissionsAndroid(部分 Expo 模块内部已封装) | Android 权限控制 |
🟣 第二部分:Expo 特有能力(核心是“能力扩展”)
| 类别 | 模块 | 用途 |
|---|---|---|
| 📷 媒体 | expo-image-picker | 选取图片或拍照上传 |
| 📍 定位 | expo-location | 获取地理位置信息 |
| 🔔 通知 | expo-notifications | 推送通知功能 |
| 🎬 启动页 | expo-splash-screen | 自定义启动页 |
| 💾 存储 | expo-secure-store、AsyncStorage | 保存用户 token、偏好设置等 |
| 🛠️ 系统功能 | expo-device、expo-clipboard、expo-network | 设备信息、复制粘贴、网络状态等 |
| 📦 路由 | expo-router | 类似 Next.js 的文件夹路由方式 |
| 🧪 更新 | expo-updates | 热更新,用户无需重新下载 app |
| 🎨 图标 | @expo/vector-icons | 内置图标库 FontAwesome 等 |
不建议只看 Expo 文档。
✅ Expo 文档是对 React Native 的封装与扩展,而不是替代。
所以你在用 Expo 时,两份文档都建议查阅:
-
📘 Expo 官方文档(https://docs.expo.dev):主要讲的是 Expo 特有的内容(如 ImagePicker、AppLoading、Push 通知、expo-router、预构建等)。
-
📘 React Native 官方文档(https://reactnative.dev/docs):讲的是核心组件和 API,如
View、Text、StyleSheet、FlatList、手势、动画等。
✅ 举例说明:
| 场景 | 应该查阅哪个文档? |
|---|---|
你想知道如何使用 <Text>、<ScrollView>、StyleSheet.create | 📘 React Native 文档 |
| 你想使用相机、图片选择器、推送通知、全局更新 | 📘 Expo 文档 |
你想了解 expo-router 的页面结构 | 📘 Expo 文档 |
| 你想做手势操作、动画过渡 | 📘 React Native 文档(+ Reanimated) |
✅ 最后一句话总结:
Expo 是 React Native 的上层工具集,它简化开发流程,但不等于完全替代 React Native 文档。
更多推荐


所有评论(0)