React-native項(xiàng)目入門(mén)與思考

引子

有個(gè)前端同學(xué)說(shuō)涡拘，等我學(xué)好了react-native,你們也就快失業(yè)了。樓主這小心臟一驚，真的假的爷辱，決定開(kāi)始學(xué)習(xí)一下react-native。其實(shí)之前一直做事native的開(kāi)發(fā)，沒(méi)有怎么接觸過(guò)前端饭弓，對(duì)于React更是比較陌生双饥，雖然從2015年開(kāi)始它火的一塌糊涂。
這里記錄一下自己接觸react-native過(guò)程中遇到的坑和作為一個(gè)native的思考弟断。

環(huán)境搭建

React-native for android 都出來(lái)快一年的時(shí)間了咏花，環(huán)境搭建這塊有很多的文章，這里還是推薦官網(wǎng)的阀趴。React-Native 中文網(wǎng)的也不錯(cuò)環(huán)境搭建昏翰。
這里主要說(shuō)一下自己遇到的坑：

編譯運(yùn)行問(wèn)題
Android端：
安裝好環(huán)境后，直接運(yùn)行react-native run-android, 該命令實(shí)際是直接使用了android目錄下的gradlew命令刘急，運(yùn)行后這里報(bào)錯(cuò)了棚菊，主要是一些依賴(lài)包的問(wèn)題。這里使用Android studio導(dǎo)入工程目錄下的android排霉，然后運(yùn)行安裝窍株，ok 了。
Ios端
由于之前沒(méi)有ios端的經(jīng)驗(yàn)攻柠，遇到的問(wèn)題都是小白問(wèn)題球订。這里需要注意的就是xcode要在7以上，然后注意修改AppDelegate.m中的server地址:

jsCodeLocation = [NSURL URLWithString:@"http://電腦ip:8081/index.ios.bundle?platform=ios&dev=true"];

Android手機(jī)上選項(xiàng)菜單不出現(xiàn)問(wèn)題
本文中使用的測(cè)試機(jī)是小米5瑰钮，剛安裝成功后冒滩，正常搖一搖手機(jī)可以出調(diào)試菜單的，然而并沒(méi)有出來(lái)浪谴，這里需要設(shè)置該應(yīng)用的懸浮窗權(quán)限开睡，設(shè)置后可以使用。

入門(mén)基礎(chǔ)

React基礎(chǔ)
當(dāng)然首先是要有js基礎(chǔ)苟耻，學(xué)語(yǔ)言個(gè)人經(jīng)驗(yàn)是先找網(wǎng)上的入門(mén)教程也有一個(gè)大概的了解篇恒，這里推薦廖雪峰的blog，然后就是邊實(shí)踐邊學(xué)習(xí)凶杖，有了一定基礎(chǔ)后再去看大部頭的經(jīng)典教材胁艰，一般就會(huì)講的比較詳細(xì)，主要是知識(shí)更系統(tǒng)智蝠，原理也會(huì)了解不少腾么，讀完后會(huì)有一個(gè)很大的提升。
react基礎(chǔ)我看了阮一峰老師的博客杈湾，React入門(mén)實(shí)例教程.
React-Native基礎(chǔ)
這里主要是跟著官網(wǎng)的教程練習(xí)就可以了解虱，需要注意不能版本之間的一些區(qū)別。同時(shí)也要注意es5和es6的一些區(qū)別漆撞，es5和es6的區(qū)別這個(gè)文章介紹的比較好殴泰。

項(xiàng)目練習(xí)

react-native-android-guide
這里收集了很多入門(mén)的資料于宙，但是有幾個(gè)月沒(méi)有更新了。體驗(yàn)了一下文中提到的知乎日?qǐng)?bào)Android版,整體來(lái)說(shuō)效果不錯(cuò)艰匙，但是在界面切換的時(shí)候略卡限煞。
react-native-material-design中實(shí)現(xiàn)了materal-design抹恳，效果不錯(cuò)员凝，但是作者有段時(shí)間沒(méi)有更新，如果使用最新的React-native 有些問(wèn)題奋献。
awesome-react-native
這個(gè)地址在持續(xù)更新著學(xué)習(xí)資料但主要以英文為主健霹，收集非常多react-native項(xiàng)目。這里fork了項(xiàng)目NBAreact單純覺(jué)得nba不錯(cuò)瓶蚂，哈哈糖埋。在源碼的基礎(chǔ)自己練習(xí)了知乎日?qǐng)?bào)的接口。
這個(gè)app中使用了react-native-scrollable-tab-view窃这，一個(gè)tab切換的庫(kù)瞳别，react-native-router-flux一個(gè)界面跳轉(zhuǎn)的路由庫(kù)，個(gè)人認(rèn)為很值得學(xué)習(xí)杭攻。
發(fā)現(xiàn)一個(gè)不錯(cuò)的react-native project, 代碼很整齊祟敛，使用了Redux，非常值得學(xué)習(xí)兆解。
reading github 地址

Debug

debug需要借助于Chrome瀏覽器馆铁，首先下載react 的chrome插件，然后在應(yīng)用菜單中選擇遠(yuǎn)程調(diào)試锅睛，即可以進(jìn)行實(shí)時(shí)斷點(diǎn)調(diào)試埠巨，效果還不錯(cuò)。

總結(jié)

就接觸的幾個(gè)開(kāi)源項(xiàng)目而言现拒，在安卓手機(jī)上的應(yīng)用表現(xiàn)略卡辣垒，主要表現(xiàn)在界面切換等動(dòng)畫(huà)上。但開(kāi)放一套可以適用于兩個(gè)端印蔬，誘惑力還是很大的勋桶。對(duì)于原有的native應(yīng)用可以考慮把一些簡(jiǎn)單的界面用react-native來(lái)實(shí)現(xiàn)。

思考

總體感覺(jué)react-native 還是有挺多不完善的地方扛点，與原生代碼相比哥遮，還是有一些差距。但是react-naive 也是在不斷的完善中陵究，有點(diǎn)像早期android眠饮，有些常用的庫(kù)比較缺失，可以考慮按照native的思路多造一些輪子铜邮。特別是android作為一個(gè)開(kāi)源的系統(tǒng)仪召，很多思路都可以應(yīng)用于react-native寨蹋。比如界面切換的路由設(shè)置、數(shù)據(jù)傳遞等扔茅，theme已旧，style的通用實(shí)現(xiàn)等，native的同學(xué)可以考慮把這些功能加入到react-native中召娜。愿react-native有一個(gè)美好的前景运褪。