React Native 学习路线 | 26 年最新零基础到精通一条龙（万人收藏⭐️） - 编程导航

编程导航学习网站：学编程、做项目、拿 Offer！

企业高频面试题库：开始刷题，面试遇原题！

精选简历模板大全：1 分钟搞定简历！

AI 资源导航网站：获取最新 AI 黑科技！

1 对 1 模拟面试：随时随地提升面试能力

React Native 求职高频面试题：开始刷题

开篇介绍

React Native 是 Facebook 于 2015 年开源的跨平台移动应用开发框架，让你可以使用 JavaScript 和 React 开发原生 iOS 和 Android 应用。React Native 的核心理念是 “一次学习，到处编写”，使用相同的技术栈开发不同平台的应用。

React Native 与传统的混合应用（Hybrid App）不同，它不是在 WebView 中运行网页，而是将 React 组件渲染为真正的原生组件。这使得 React Native 应用的性能和用户体验接近原生应用，同时保留了跨平台开发的优势。

为什么要学 React Native？

React Native 是跨平台移动开发的主流选择之一，被 Facebook、Instagram、Discord、Shopify、Microsoft 等知名公司使用。掌握 React Native，不仅能让你使用 JavaScript 开发移动应用，还能复用 Web 开发的技术栈，大大提高开发效率。而且 React Native 工程师的薪资非常顶，一线城市的 React Native 工程师平均薪资在 20-40K。

React Native 的核心特性包括：使用 React 语法开发、组件渲染为原生组件、热重载（Fast Refresh）、跨平台（一套代码两个平台）、JavaScript 和原生代码互操作、丰富的第三方库等。Expo 是 React Native 的开发工具和服务平台，提供了大量开箱即用的功能，大大简化了 React Native 开发。

React Native 和 Flutter 是跨平台开发的两大主流框架。React Native 使用 JavaScript 和原生组件，Flutter 使用 Dart 和自渲染引擎。React Native 的优势是技术栈与 Web 一致、生态丰富；Flutter 的优势是性能更好、UI 一致性更高。两者各有优劣，可以根据项目需求选择。

学习前提

学习 React Native 建议先掌握：

React 基础：熟练使用 React、Hooks、组件等【必学】
JavaScript/TypeScript：熟练使用 ES6+ 语法【必学】
移动端开发基础：了解移动端开发的基本概念【建议】

关于 React 的详细学习，可以查看 React 学习路线

学习路线图

就业方向

学完 React Native 后，可以从事以下岗位：

React Native 工程师：专注于跨平台移动开发
移动端开发工程师：开发 iOS 和 Android 应用
全栈工程师：React Native 移动端 + Web 前端/后端
前端工程师：同时负责 Web 和移动端开发

整体学习建议

1）先学 React：React Native 基于 React，一定要先熟练掌握 React 的基础知识（组件、Hooks、状态管理等），再学习 React Native。

2）Expo 大大简化了 React Native 开发，提供了开箱即用的功能（如相机、位置、推送通知等），建议初学者使用 Expo 开始学习。

3）React Native 开发要在真机上调试，不要只在模拟器上测试。真机的性能和行为可能与模拟器不同。

4）React Native 和 React Web 有很多相似之处，但也有差异。比如 React Native 使用 View、Text 组件而不是 div、span；使用 StyleSheet 而不是 CSS 文件等。

-1.png)

5）学习 React Native 时可以多用 AI 工具辅助开发，推荐到 AI 资源大全网站中转一转，多认识一些 AI 工具。

阶段 1：React Native 基础（10-20 天，仅供参考）

学习目标

理解 React Native 的核心概念，掌握基本的组件和 API。

知识点

React Native 简介【必学】：

React Native 的特点和优势
React Native 和 React Web 的区别
React Native 和 Flutter 的对比【简单了解】

开发环境【必学】：

Expo 开发环境（推荐新手）
React Native CLI 开发环境
模拟器和真机调试

核心组件【必学】：

View、Text、Image
ScrollView、FlatList
Button、TouchableOpacity
TextInput

样式【必学】：

StyleSheet
Flexbox 布局
平台特定样式

学习建议

1）Expo 是 React Native 的开发平台，提供了开箱即用的功能和工具。使用 Expo 可以快速开始开发，不需要配置复杂的原生环境。建议新手使用 Expo。

2）React Native 的样式使用 StyleSheet 定义，语法类似 CSS 但有一些差异。React Native 使用 Flexbox 布局，默认是 flexDirection: 'column'。

3）FlatList 是 React Native 的高性能列表组件，支持虚拟列表、下拉刷新、上拉加载等功能。要熟练掌握 FlatList 的使用。

4）React Native 的组件不是 HTML 元素，而是平台特定的原生组件。View 对应原生的 UIView（iOS）或 android.view（Android）。

学习资源

⭐ React Native 官方文档：最权威的学习资