公司内分享RN内容

Author Avatar
LiuZh 7月 29, 2017

分享ReactNative

什么是ReactNative

  • FaceBook/ReactNative官网：Learn once, write anywhere: Build mobile apps with React

    React Native 使你能够使用基于 JavaScript 和 React 一致的开发体验在本地平台上构建世界一流的应用程序体验。React Native 把重点放在所有开发人员关心的平台的开发效率上——开发者只需学习一种语言就能轻易为任何平台高效地编写代码。Facebook 在多个应用程序产品中使用了 React Native，并将继续为 React Native 投资。

  • 我的异常不靠谱的个人说法

    正常情况下，你想iOS、Android开发都搞定，你需要会OC、Swfit、Java甚至更多的知识，但是你只需要会RN一个知识体系，就能达到这个目的，多方便？目前来说，H5能一统移动端效果，是开发人员梦寐以求的(微信小程序为啥火，愿意也有其一)，但是交互效率极其差劲，ReactNative弥补了交互效率短板，他近乎原生的体验的确非常的棒（目前来说，距离原生还是有差距）。目前部分APP有采用混合开发（部分原生，部分H5 or RN or weex等），我相信RN的模式或者混合开发的模式，将是一个开发趋势~

学习ReactNative之前你需要的储备

先放最权威的学习资料：（开局放大招没见过？）

  1. FaceBook->ReactNative文档
  2. ReactNative中文社区(中文文档)

当然，我现在得告诉你，正式学习ReactNative之前，你必须掌握：

  1. HTML(基本概念就够了)

    关于HTML的学习，网络上随便一找就有很好的相关知识，而且开发RN，对于HTML的认知只需要一丢丢(认真脸)就够了

  2. CSS(你需要掌握大部分CSS属性)，当然，其中的flex布局你必须掌握，因为flex布局是RN界面摆放的核心知识

    CSS学习也是网上随便找找就有很好的内容~但是对于flex布局的学习，个人墙裂推荐阮一峰老师的博客：flex布局教程：语法篇、Flex 布局教程：实例篇

  3. JavaScript语言，你以为这就够了？不不不，ReactNative已经全面采用ES6语法进行开发，如果仅会ES5那就然并卵了~

    学习JavaScript，首先需要明确你将打算在JavaScript上投入多少！如果只是想略了解，那么我建议网络上随便找找相关知识看看就够了。如果你想认真的学习JavaScript，希望有全面了解、深入了解，那么我推荐的书籍有：《JavaScript高级程序设计》、《你不知道的JS》、《JavaScript语言精粹》.另外，关于ES6的学习，我想除了阮一峰老师的《ES6标准入门》应该别无他荐了吧~（没错阮一峰老师将书开源了….当然喜欢看纸质书也可以去购买纸质书《ES6标准入门》）

OK，开始进入RN踩坑之旅

  1. 首先你需要环境，对，和所有方面的知识一样….首先你需要配置RN所需要的环境！

    直接参见===>RN官网指导、RN中文社区指导(就是官网的翻译版>_<)，官网介绍的非常详细！但是这个过程坑异常的多！祝好运了！

  2. IDE

    其实说不上IDE吧，只要是个文本编辑器就OK了(我酷爱sublime)，WebStorm、Atom、Xcode、VSC等等都行，爱用啥用啥，目前好像WebStorm上RN开发比较友好，微软的VSC居然做的也挺炫酷，小赞一下

  3. 你的Hello World

    配置环境后，打开命令行敲react-native init HelloWorld你就能初始好你第一个项目==>示例

  4. 代码结构

    • 组件导入区： 所有用到的组件都需要事先进行导入，包括样式也需要进行导入
    • 核心代码区：所有逻辑代码编写的地方
    • 组件样式区：render()方法中用到的组件的样式，可以集中在这里编写

    • 注册启动组件：组件只有注册后才能运行。这里用到的AppRegistry也需要在组件导入区进行导入

      ===>示例

  5. 对RN一些组件、属性、体系方面内容的学习

    这个直接照着官网左栏目录往下学，学到<网络>这一栏(刚好10栏，每一栏内是一篇小教程，很短)第一步OK，可以开始按需学习了~

如果你确认你想去学习RN

这里这篇博客你不容错过~

给所有开发者的React Native详细入门指南

expand_less