2015年Facebook开源了React Native，让前端开发者可以用JavaScript和React来开发原生移动应用，一套代码同时跑iOS和Android，这在当时引起了很大的轰动。我从2016年开始接触React Native，到现在也用了一年多了，做了几个小项目，对React Native有了一些理解和经验。

很多朋友问我，React Native该怎么学，有没有系统的学习路线，今天就来分享一下我的React Native学习路线，从我是怎么入门的，到需要掌握哪些知识，再到学习过程中的一些经验和踩坑总结，希望能帮到想学习React Native的朋友。

一、为什么学React Native

在讲学习路线之前，先说说为什么要学React Native，它到底有什么优势，值不值得学。

React Native最大的优势就是跨平台，一套JavaScript代码，可以同时编译成iOS和Android两个平台的原生应用，开发效率大大提高。以前开发一个App，需要iOS团队用Objective-C或Swift写一套，Android团队用Java或Kotlin写一套，两套代码，两个团队，成本高，维护难。用React Native的话，一个前端团队，一套代码，就能同时出两个平台的App，成本低，迭代快，对于中小团队来说非常有吸引力。

第二个优势是热更新（Hot Reload）。开发原生应用的时候，改一点代码就要重新编译运行，等好几分钟才能看到效果，开发效率很低。用React Native的话，改完代码保存一下，手机上立刻就能看到效果，不用重新编译，开发体验非常好，开发效率大大提高。

第三个优势是前端开发者可以快速上手。如果你已经会JavaScript和React，那学React Native就非常快，基本上一周就能上手做项目，不用再去学Objective-C、Swift、Java这些原生语言，学习成本低很多。现在前端开发者这么多，React Native让前端开发者可以很容易地进入移动开发领域，这也是它这么火的原因之一。

第四个优势是生态丰富。React Native经过这几年的发展，生态已经很丰富了，有大量的第三方组件和库，基本上你需要的功能都能找到现成的组件，不用自己从零开始写。而且React Native的社区很活跃，遇到问题很容易找到解决方案。

当然，React Native也不是银弹，它也有一些缺点，比如性能不如纯原生，特别是复杂动画和大量列表的场景；比如有些原生功能需要自己写桥接，有一定的门槛；比如版本更新快，兼容性问题比较多。但是对于大部分应用来说，React Native已经足够用了，而且它还在快速发展中，性能和功能都在不断提升。

总的来说，如果你是前端开发者，想做移动开发，或者你们团队想快速开发跨平台App，React Native还是很值得学的。

二、前置知识

在学React Native之前，需要先掌握一些前置知识，这些是基础，没有这些基础，学React Native会很吃力。

1. JavaScript基础

这个是最基本的，React Native是用JavaScript写的，所以JavaScript基础一定要扎实。变量、函数、作用域、闭包、原型链、异步编程、ES6+的新特性（let/const、箭头函数、解构赋值、模板字符串、Promise、async/await、模块化等等），这些都要熟练掌握。如果JavaScript基础不好，建议先把JavaScript基础打牢，再来学React Native，不然会很痛苦。

2. React基础

React Native是基于React的，所以React的基础一定要会。组件、JSX、props、state、生命周期、事件处理、列表渲染、条件渲染、组件通信、高阶组件、Context、Hooks（如果用的是新版本的话），这些React的核心概念都要掌握。如果你已经会React了，那学React Native就非常快，基本上就是换了一套组件标签，把div换成View，把p换成Text，把img换成Image，其他的逻辑都是一样的。如果你不会React，建议先学React，再学React Native，不要直接上来就学React Native。

3. CSS基础

React Native的样式是用CSS的子集，虽然不是完整的CSS，但是基本的CSS概念还是一样的，比如盒模型、flex布局、定位、颜色、字体等等。特别是flex布局，React Native里布局主要靠flex，一定要熟练掌握。如果你有前端基础，CSS应该不是问题，如果没有，建议先学学CSS，特别是flex布局。

4. 移动端基础概念

虽然React Native是跨平台的，但是毕竟是做移动应用，一些移动端的基础概念还是要了解的，比如屏幕尺寸、分辨率、像素密度、安全区域、手势操作、导航、原生模块等等。还有iOS和Android两个平台的差异，也要有一定的了解，因为React Native虽然是跨平台的，但是有些地方还是有平台差异的，需要做平台适配。

这些前置知识都掌握了，学React Native就会很快。如果有哪方面薄弱，建议先补一补，不要急着上手，基础打牢了，后面才会顺利。

三、学习路线

前置知识准备好了，就可以开始学React Native了。我把我的学习路线分成了几个阶段，大家可以参考一下。

第一阶段：环境搭建和Hello World

第一步肯定是搭建开发环境，这个是基础。React Native的环境搭建比纯前端要复杂一些，需要安装Node.js、React Native CLI、Android Studio（Android开发环境）、Xcode（iOS开发环境，只有Mac才能装），还要配置各种环境变量，安装各种依赖。

环境搭建这一步很容易出问题，特别是Windows系统下搭建Android开发环境，经常会遇到各种报错，比如SDK版本不对、环境变量没配好、模拟器启动不了等等。建议大家按照官方文档一步步来，不要跳步，遇到问题多搜索，基本上都能解决。

环境搭好之后，就可以创建第一个React Native项目，跑起来Hello World了。用react-native init命令创建一个项目，然后启动模拟器，react-native run-android或者react-native run-ios，就能看到第一个React Native应用跑起来了。这一步虽然简单，但是很重要，环境跑通了，后面才能顺利学习。

第二阶段：基础组件和样式

环境跑通之后，就开始学React Native的基础组件和样式了。React Native提供了很多基础组件，比如View、Text、Image、TextInput、ScrollView、FlatList、SectionList、Button、TouchableOpacity、ActivityIndicator、Modal等等，这些是构建界面的基础，都要熟悉。

样式方面，React Native用的是StyleSheet.create来定义样式，用的是CSS的子集，大部分CSS属性都支持，但是也有一些不支持，比如没有选择器，没有继承（除了Text组件），单位用的是dp而不是px，布局默认用flex。这些差异要注意，刚开始可能会不习惯，用多了就好了。

这个阶段的学习方法就是多写多练，把每个组件都用一遍，看看效果，熟悉它的属性和用法。可以做一些简单的界面，比如登录页、列表页、详情页，把基础组件和样式练熟。

第三阶段：导航和路由

做App肯定需要页面跳转，导航是必不可少的。React Native官方没有内置导航组件，需要用第三方库，最常用的是react-navigation，还有react-native-navigation。

react-navigation是纯JavaScript实现的，使用简单，文档齐全，社区活跃，是大部分人的选择。它提供了StackNavigator（堆栈导航）、TabNavigator（标签导航）、DrawerNavigator（抽屉导航）等多种导航模式，可以满足大部分App的导航需求。

这个阶段要学会配置导航，实现页面之间的跳转、传参、返回，学会各种导航模式的使用，比如底部Tab栏、顶部Tab栏、侧边抽屉、堆栈跳转等等。导航是App的骨架，一定要掌握好。

第四阶段：状态管理

简单的应用用组件的state就够了，但是应用复杂了，组件之间的状态共享和通信就会变得很麻烦，这时候就需要状态管理库了。

React Native的状态管理和React是一样的，常用的有Redux、MobX、Context API等等。Redux是最经典的，生态丰富，但是样板代码多，学习曲线陡一些；MobX更简单直观，写起来更舒服；Context API是React内置的，简单的状态共享用它就够了，不用引入第三方库。

这个阶段可以根据自己的需求选择一个状态管理库来学，理解它的核心概念和使用方法，学会在项目中用它来管理状态。不用每个都学，精通一个就够了，原理都是相通的。

第五阶段：网络请求和数据存储

做App肯定要和后端交互，网络请求是必不可少的。React Native官方提供了fetch API，也可以用第三方库比如axios。要学会发起GET、POST等请求，处理请求头、请求参数、响应数据，处理错误和异常，学会拦截器的使用。

数据存储也是常用的功能，比如保存用户信息、缓存数据、离线存储等等。React Native常用的存储方案有AsyncStorage（官方推荐，但是是异步的，只能存字符串）、react-native-sqlite-storage（SQLite数据库，适合存结构化数据）、realm（移动端数据库，性能好，使用简单）。可以根据需求选择合适的存储方案。

这个阶段还要学会处理加载状态、空状态、错误状态，学会下拉刷新、上拉加载更多这些常用的列表功能，这些都是实际项目中经常用到的。

第六阶段：原生模块和桥接

虽然React Native提供了很多组件和API，但是有些功能还是需要调用原生的能力，比如调用相机、相册、定位、蓝牙、推送、支付、统计等等，这些功能有些有现成的第三方组件，但是有些还是需要自己写原生桥接。

这个阶段要学会怎么写原生模块，怎么在JavaScript和原生代码之间通信，怎么把原生的功能封装成JavaScript可以调用的接口。iOS端用Objective-C或Swift写，Android端用Java或Kotlin写，需要有一定的原生开发基础。如果原生基础不好，也不用太担心，大部分常用功能都有现成的第三方组件，直接用就行，不用自己写。

这个阶段还要学会处理平台差异，有些功能iOS和Android不一样，需要分别适配，用Platform.OS来判断平台，写不同的逻辑。

第七阶段：性能优化和打包发布

项目做完了，还要做性能优化和打包发布。性能优化包括列表优化、图片优化、内存优化、启动速度优化、动画优化等等，特别是长列表和复杂动画的场景，性能问题会比较明显，需要优化。

打包发布就是把应用打包成apk（Android）和ipa（iOS），然后发布到应用商店。Android打包相对简单，生成签名密钥，配置签名信息，然后执行打包命令就行。iOS打包麻烦一些，需要苹果开发者账号，配置证书和描述文件，用Xcode打包，然后提交到App Store审核。

这个阶段还要学会版本管理、热更新（比如用CodePush）、崩溃统计、埋点统计这些上线后需要用到的东西，这些都是实际项目中必不可少的。

四、学习资源和经验

学习过程中，好的学习资源能让你事半功倍，这里推荐一些我觉得不错的学习资源。

官方文档： React Native的官方文档写得非常好，很详细，而且有中文版，建议大家一定要认真看官方文档，这是最权威、最全面的学习资料。遇到问题首先查官方文档，大部分问题都能找到答案。

React Navigation官方文档： 导航是必学的，react-navigation的官方文档也写得很好，有详细的教程和示例，跟着学一遍就能掌握。

GitHub开源项目： 找一些优秀的React Native开源项目，看看别人是怎么写的，学习别人的代码结构、组件封装、状态管理、性能优化等等。看优秀的代码是提高技术最快的方式之一。

技术社区： 关注一些技术社区，比如掘金、SegmentFault、知乎、React Native中文网，上面有很多优质的教程和经验分享，遇到问题也可以在上面提问。还有React Native的GitHub Issues，很多问题别人已经遇到过并且解决了，搜一搜就能找到答案。

视频教程： 如果喜欢看视频学习，可以找一些系统的React Native视频教程跟着学，入门会更快一些。但是视频教程一般更新比较慢，可能不是最新版本，还是要以官方文档为准。

学习经验方面，我总结了几点：

  1. 边学边练，多写代码：不要只看教程不动手，编程是练出来的，不是看出来的。每学一个知识点，就动手写一写，做个小demo，这样才能真正掌握。
  2. 做一个完整的项目：学到一定程度，就找一个完整的项目来做，比如一个TodoList、一个新闻客户端、一个社交App，把学到的东西都用上，在做项目的过程中发现问题、解决问题，这样提高最快。
  3. 遇到问题多搜索，多思考：学习过程中肯定会遇到各种问题，不要一遇到问题就问别人，先自己搜索，看看官方文档、看看GitHub Issues、看看技术博客，大部分问题都能自己解决。自己解决问题的过程，就是能力提升的过程。
  4. 关注版本更新：React Native更新很快，几乎每个月都有新版本，API和用法可能会有变化，要关注版本更新，及时了解新特性和破坏性变更，不要用过时的API。
  5. 不要追求完美，先跑起来再说：刚开始学的时候，不要追求代码写得多优雅、性能多好，先把功能实现了，跑起来再说，然后再慢慢优化。先完成，再完美。

五、踩坑总结

用了一年多React Native，踩了不少坑，这里总结几个常见的坑，希望大家能避开。

第一个坑是环境搭建。Windows下搭建Android开发环境真的很容易出问题，各种SDK版本、环境变量、模拟器的问题，折腾一天都不一定能搭好。建议大家用Mac开发，体验好很多，而且可以同时开发iOS和Android。如果只能用Windows，那就耐心一点，按照官方文档一步步来，遇到问题多搜索。

第二个坑是版本兼容性。React Native更新很快，第三方库的更新可能跟不上，经常会出现某个库和当前版本的React Native不兼容的情况，导致项目跑不起来。建议大家不要盲目追新版本，用稳定版本就好，升级版本之前先看看有没有兼容性问题，第三方库支不支持。

第三个坑是列表性能。长列表是性能问题的重灾区，如果用ScrollView渲染大量数据，会非常卡，一定要用FlatList或SectionList，而且要做优化，比如设置getItemLayout、removeClippedSubviews、keyExtractor等等，列表项也要做优化，避免不必要的重渲染。

第四个坑是原生依赖。很多第三方库需要链接原生依赖，react-native link有时候会出问题，链接不成功，或者链接错了，导致项目编译失败。建议大家链接之后检查一下原生项目的配置，看看是不是真的链接成功了，如果自动链接不行，就手动链接。

第五个坑是调试。React Native的调试比纯前端麻烦一些，虽然有Chrome DevTools，但是有些问题还是不好定位。建议大家学会用React Native Debugger，比Chrome DevTools功能更强，还能看Redux的状态。还有要学会看日志，原生的日志、JavaScript的日志，出了问题先看日志，大部分问题都能从日志里找到线索。

六、写在最后

React Native跨平台开发学习路线：我是怎么入门的。

以上就是我的React Native学习路线和经验总结，从为什么学，到前置知识，到分阶段学习路线，到学习资源，到踩坑总结，希望能帮到想学习React Native的朋友。

React Native是一个非常优秀的跨平台开发框架，对于前端开发者来说，它是进入移动开发领域的一把钥匙，学习成本低，开发效率高，生态也越来越丰富。当然，它也不是完美的，有它的缺点和局限性，但是对于大部分应用来说，它已经足够用了。

学习任何新技术都不是一蹴而就的，需要耐心和坚持，React Native也是一样。不要怕遇到问题，遇到问题解决问题的过程，就是成长的过程。只要多写多练，多思考多总结，相信大家都能学好React Native，做出优秀的跨平台应用。

最后用一句话结尾："技术是工具，解决问题才是目的。React Native也好，原生也好，能高效解决问题的就是好技术。选对工具，用好工具，才是最重要的。"

祝大家学习顺利，都能做出自己满意的App！