2018 React-Native 入坑记

in cn •  7 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上来。

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  
  ·  7 years ago 

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

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

  ·  7 years ago 

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

react还是很值得一学的

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

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

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

应该不是一个人。

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

收藏

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

  ·  7 years ago 

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

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

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

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

谢谢支持!

厉害了。

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

great thinking...

来学习一下