React-Native 高仿“掘金”用戶端__react-native

曆時3周時間不到的時間，前兩周還有考試，利用一些瑣碎的時間，終於把這個App基本的介面功能完成了。先來上圖一張

採用React-Native 0.36版本開發的，算是踩了不少坑，來簡單總結一下吧。

講真，一款應用的使用者忠誠度，UI絕對佔有很大的關係，這也是我模仿掘金用戶端的一個理由吧，裡面涉及到的介面夠花哨。就拿首頁這張圖來說，

要實現這麼一個圖，需要層層嵌套，還要考慮左靠右對齊問題，所以基本這個“首頁”布局能做出來，大部分布局基本都能搞定了，也基本就是一看就知道應該怎麼布，我在做完這個首頁布局之後，後面“我”頁面裡面那些都很簡單了。如果你是前端高手，那就另當別論了。

我在做這個App的時候，由於考慮到了雙平台，所以代碼裡面考慮很多兩個平台的差異，也盡量凸顯各自系統專屬的特性，比如Android5.0的按鈕就擁有反饋效果，所以我選擇TouchableNativeFeedback作為Android平台的Button，但這個不相容iOS，所以選擇TouchableOpacity作為該平台的Button。用一個三木運算子或者單獨拎出來做if判斷來實現各自平台的效果。

還有一個是需要考慮多解析度適配的問題，剛開始我是在2K解析度下設計的，換到另個解析度下介面比例就變了，不是整體變小就是整體變大，所以網上查了下，沒有太好的辦法，只有自己去寫個函數重新計算一下大小。比如字的大小，長寬。margin，padding這些都需要計算下，不過borderRadius就別了，會出小bug。還有最細的一根線，即1個像素寬的線，可以用 1/PixelRatio.get()來獲得。具體代碼可以找原始碼裡面util下的px2dp這個函數。

從這個項目還可以學到組件間的通訊，包括父到子，這個簡單。子到父，還有複雜的情況利用觀察者模式來實現。不過這個React-Native已經封裝了一個，可以直接拿來用。

還有白屏的問題，相信這個網上有很多教程大家都看過，這裡也就不多說了。

還有啥呢。。。好像也就差不多這些了。這個是我第一個react-native項目，所以肯定還有不少代碼寫得不夠完美的地方，還請大家多多見諒，互相學習。至此，這個項目依然還有很多功能沒有完成，但是基本複雜的介面我都過了一遍，那些很簡單的介面我也就沒再實現了，有興趣的可以fork繼續完善。

另外補充一下，資料擷取是抓包獲得的，他們那套熱門演算法並沒有深究，只是為了得到資料排版和練習，完全出於學慣用途，並無惡意，還請“掘金”團隊海涵，哈哈。最後貼一下其他介面的效果，倉庫會在最後面放出～～

GitHub地址在這裡，點擊開啟。希望大家可以給個Star，謝謝啦～