React-native項目入門與思考

引子

有個前端同窗說，等我學好了react-native,大家也就快失業了。樓主這當心髒一驚，真的假的，決定開始學習一下react-native。其實以前一直作事native的開發，沒有怎麼接觸過前端，對於React更是比較陌生，雖然從2015年開始它火的一塌糊塗。
這裏記錄一下本身接觸react-native過程當中遇到的坑和做爲一個native的思考。

環境搭建

React-native for android 都出來快一年的時間了，環境搭建這塊有不少的文章，這裏仍是推薦官網的。React-Native 中文網的也不錯環境搭建。
這裏主要說一下本身遇到的坑：

1. 編譯運行問題
   Android端：
   安裝好環境後，直接運行react-native run-android, 該命令實際是直接使用了android目錄下的gradlew命令，運行後這裏報錯了，主要是一些依賴包的問題。這裏使用Android studio導入工程目錄下的android，而後運行安裝，ok 了。
   Ios端
   因爲以前沒有ios端的經驗，遇到的問題都是小白問題。這裏須要注意的就是xcode要在7以上，而後注意修改AppDelegate.m中的server地址:

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

2. Android手機上選項菜單不出現問題
   本文中使用的測試機是小米5，剛安裝成功後，正常搖一搖手機能夠出調試菜單的，然而並無出來，這裏須要設置該應用的懸浮窗權限，設置後可使用。

---

入門基礎

1. React基礎
   固然首先是要有js基礎，學語言我的經驗是先找網上的入門教程也有一個大概的瞭解，這裏推薦廖雪峯的blog，而後就是邊實踐邊學習，有了必定基礎後再去看大部頭的經典教材，通常就會講的比較詳細，主要是知識更系統，原理也會了解很多，讀完後會有一個很大的提高。
   react基礎我看了阮一峯老師的博客，React入門實例教程.

2. React-Native基礎
   這裏主要是跟着官網的教程練習就能夠了，須要注意不能版本之間的一些區別。同時也要注意es5和es6的一些區別，es5和es6的區別這個文章介紹的比較好。

---

項目練習

1. react-native-android-guide
   這裏收集了不少入門的資料，可是有幾個月沒有更新了。體驗了一下文中提到的知乎日報Android版,總體來講效果不錯，可是在界面切換的時候略卡。
   react-native-material-design中實現了materal-design，效果不錯，可是做者有段時間沒有更新，若是使用最新的React-native 有些問題。
2. awesome-react-native
   這個地址在持續更新着學習資料但主要以英文爲主，收集很是多react-native項目。這裏fork了項目NBAreact單純以爲nba不錯，哈哈。在源碼的基礎本身練習了知乎日報的接口。
   這個app中使用了react-native-scrollable-tab-view，一個tab切換的庫，react-native-router-flux一個界面跳轉的路由庫，我的認爲很值得學習。
3. 發現一個不錯的react-native project, 代碼很整齊，使用了Redux，很是值得學習。
   reading github 地址

---

Debug

debug須要藉助於Chrome瀏覽器，首先下載react 的chrome插件，而後在應用菜單中選擇遠程調試，便可以進行實時斷點調試，效果還不錯。

總結

就接觸的幾個開源項目而言，在安卓手機上的應用表現略卡，主要表如今界面切換等動畫上。但開放一套能夠適用於兩個端，誘惑力仍是很大的。對於原有的native應用能夠考慮把一些簡單的界面用react-native來實現。

思考

整體感受react-native 仍是有挺多不完善的地方，與原生代碼相比，仍是有一些差距。可是react-naive 也是在不斷的完善中，有點像早期android，有些經常使用的庫比較缺失，能夠考慮按照native的思路多造一些輪子。特別是android做爲一個開源的系統，不少思路均可以應用於react-native。好比界面切換的路由設置、數據傳遞等，theme，style的通用實現等，native的同窗能夠考慮把這些功能加入到react-native中。願react-native有一個美好的前景。