早就聽(tīng)說(shuō)React-native大名蛾茉，一直未去嘗試慧域。近期由于項(xiàng)目調(diào)研需要侄非，想拿原生和react-native app進(jìn)行比較登淘。正好最近想實(shí)現(xiàn)一個(gè)leetcode題庫(kù) app箫老，但用iOS做意義不大，正值5.1假期黔州，便試上一試耍鬓。
剛開(kāi)始接觸，最好看官網(wǎng)文檔流妻，更新實(shí)在太快界斜，ES6和ES5語(yǔ)法不同，版本更迭坑又多合冀。了解一些基本的html和js語(yǔ)法即可各薇，但React采用JSX語(yǔ)法，可當(dāng)做新語(yǔ)言學(xué)，但也有它的套路峭判。大多數(shù)坑都是從官方issue和文檔开缎、Stack Overflow上填的。
安裝
直接看官網(wǎng)文檔林螃，不過(guò)npm和其它很多組件需要更新奕删，以O(shè)S-X系統(tǒng)為例，使用brew更新需要的軟件,最好設(shè)置代理shadosocks或者h(yuǎn)ttp代理.
安裝過(guò)程只要這些前提工作準(zhǔn)備好疗认，安裝官網(wǎng)指令非惩瓴校快的，主要參考以下教程横漏。
mac更新node
brew update 慢 解決辦法 鏡像更新源
官網(wǎng)安裝指令如下:
brew install watchman
npm install -g react-native-cli
react-native init AwesomeProject
cd AwesomeProject
react-native run-ios```
安裝啟動(dòng)后
其中比較重要的是package.json
這里面包括了所有的依賴
我這個(gè)項(xiàng)目比較老谨设，依賴沒(méi)有參考性，有的依賴升級(jí)后缎浇，變動(dòng)很大了扎拣，比如說(shuō)react和react-native兩個(gè)庫(kù)中的組件更替。
###IDE和調(diào)試
####IDE
IDE推薦WebStorm(2017.1月版網(wǎng)上已有[激活碼](http://www.reibang.com/p/4a2875961dd0),和IDEA同根同源素跺，使用習(xí)慣和界面風(fēng)格類似)
[WebStorm里面配置運(yùn)行React Native的方案](http://www.cnblogs.com/shaoting/p/6110202.html)
這一方案可實(shí)時(shí)根據(jù)JSX代碼查看界面二蓝，非常方便，直接運(yùn)行指厌，不用打開(kāi)xcode占用內(nèi)存了刊愚。
注意運(yùn)行React-Native在iOS Simulator中，兩個(gè)快捷鍵經(jīng)常用到踩验。<pre>command+D</pre>可以打開(kāi)設(shè)置選項(xiàng)鸥诽，可以允許chrome遠(yuǎn)程調(diào)試和實(shí)時(shí)更新操作；而
<pre>command+R</pre>是重新load JS的操作晰甚。
也有采用atom或者其它IDE的衙传，atom的優(yōu)點(diǎn)在于插件豐富，功能強(qiáng)大厕九。
####調(diào)試
前端調(diào)試當(dāng)然是用chrome,這方面我經(jīng)驗(yàn)不是很多蓖捶，就不多說(shuō)了。
###語(yǔ)法
####JSX語(yǔ)法
阮一峰有一系列教程可以參考
[ECMAScript6](http://es6.ruanyifeng.com/#docs/intro)
[ReactNative學(xué)習(xí)筆記--JS基礎(chǔ)使用語(yǔ)法](http://www.imooc.com/article/14400)
[深入淺出ES6（二）：迭代器和for-of循環(huán)](http://www.infoq.com/cn/articles/es6-in-depth-iterators-and-the-for-of-loop)
####Flex布局
[Flex布局教程-阮一峰](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
###開(kāi)源項(xiàng)目和資源
[如何學(xué)習(xí)React native扁远，有哪些建議或資源俊鱼？](https://www.zhihu.com/question/56628437)
[美食項(xiàng)目-親測(cè)可運(yùn)行，做的還不錯(cuò)](https://github.com/ljunb/react-native-iShiWuPai)
[分享 50 個(gè)完整的 React Native 項(xiàng)目](https://juejin.im/post/58f37cb361ff4b0058f9824a?utm_source=tuicool&utm_medium=referral)
[React-native開(kāi)發(fā)過(guò)程中常見(jiàn)錯(cuò)誤](http://www.reibang.com/p/98c8f2a970eb)
###基于LeetCode的小Demo
實(shí)現(xiàn)一個(gè)展示題目清單和題目詳情的頁(yè)面畅买。
用到組件
- ListView
- View
- Text
- React Navigation(stacknavigator)
- css一些styles并闲，利用flex布局
由于我的數(shù)據(jù)是array中嵌入json，所以用下面這種處理方法谷羞。
[ReactNative中實(shí)現(xiàn)實(shí)現(xiàn)ListView的數(shù)據(jù)源是多維數(shù)組](http://www.tuicool.com/articles/RVVfui3)
#####TODO
- Leetcode數(shù)據(jù)爬蟲(chóng)去爬取||直接本地處理他人題庫(kù)存入數(shù)據(jù)庫(kù)
- 有一些開(kāi)源的如python和nodejs處理的帝火，或者jsoup解析html溜徙。
- 代碼格式化處理呈現(xiàn)在React-Native中
- markdown處理代碼風(fēng)格是怎么做到的？
- 之后的關(guān)注點(diǎn)
- state和props特性學(xué)習(xí)
- tabbar和navigation組件
- react中的多線程技術(shù)-如何異步
- 上拉下拉數(shù)據(jù)刷新
- 圖標(biāo)展現(xiàn)(i-test)
