2018 React-Native 入坑记

in #cn6 years ago (edited)

过去的两周,一直在沉迷学习 react-native,也一直没有抽出时间写写文章。

直到今天,终于把react-native的整体开发流程走通了一遍,抓紧来steem记录一下。

0x01 什么是React-Native


React Native 就是一个用JavaScript开发IOS 和 Android应用的框架。

正常情况下,开发IOS应用需要使用 Swift 语言,开发Android应用需要用Java.

但作为“做好的编程语言” - Javascript,想利用React的影响力,统一整个 Web,Android,IOS 平台的开发,所以React-Native 应运而生。

0x02 为什么选React-Native


最近自己有个项目要开发移动端应用,因为时间有限,不可能分别去学习IOS或Android开发。

调查了市面上,能同时写两个平台的框架,有ionic, weexreact-native

最后选择React-native的理由也很简单,对比之下,它在github上的star数最多,有62k..

这就意味着社区大,人多,文档详细,别人都把坑都踩过了,自然能节约自己的时间。

同时React-Native是基于React的,其背后有更大的社区,及各种成熟的组件。

PS: 其实这也是自己选择加密货币社区的重要评价标准,哪个社区用户多,用户活跃,就去那里。

0x03 如何学习 React-Native


我的基础是懂一些基本的JS + CSS, 接触过React, 但对ES6 语法很陌生。

这种条件下,想更快的上手并开发应用,我会到网上找视频教程。

最后在 Udemy 上找到了一个非常好的教程: The Complete React Native and Redux Course

课程进度可能有些慢,我是看着1.5倍速看的。其中有些内容稍微旧,看完视频后,需要读一遍react-native官网教程。

0x04 React-Native 最佳实践


写一个APP,需要配置开发环境,选择各种组件,以下是我自认为比较好的开发规范和组件

  1. Webstorm: 编写Javascript的IDE

  2. ESlint: 用于JS的语法检查

  3. React-Navigation: 用于APP中不同Screen的切换

  4. Redux: 用于React的状态管理

  5. Redux-Saga: Redux的中间件,用于管理Redux的异步操作

  6. lodash: 用于JS的数据处理

  7. Expo: 用于快速测试,预览React Native应用(用了它,可以省去Xcode编译的烦恼)

  8. Native-Base: 一个比较好的UI套件,类似web中的bootstrap

0x05 成果展示


以下是一个简单的例子,实现了各种界面的切换,利用steemconnect API 获取数据并展示。

具体的开发还需要很长时间,等自己的应用开发完成后,再考虑应用到Steem上来。

Sort:  

非常技术类的文章啊,门外汉靠边站。

哈哈,除了技术不会写其他的了...

先收藏一下,回来在学习。一直想学react都没抽出时间来看看

react还是很值得一学的

这个应用 很好用 希望早点上线

你终于更新了。来过几次你都没更新。你的贴子。我经常能学习到有用的

谢谢支持,不过最近没大更新

时间太少了,没时间静下心来写..

我被大漠穷秋(angular PM)安利 angular 后,就再也脱不了坑了

我听过这个人,是不是还和vue的撕过..

差不多,我是在一次开源会议上碰上大漠穷秋的

应该不是一个人。

哈哈,我记得还有个人叫大漠,反正前端比后端乱多了。。

前辈,见证人我投你一票,太棒了

谢谢支持!

厉害了。

终于更新了!您总是给我点赞,您自己也不更新一下。
虽然我的赞不值钱,人总是要学会感恩的,所以我也想给您点点赞!

great thinking...

来学习一下