昨天我們已經把 Home 完成並且點了下面的商品會進入 PostDetail,PostDetail 目前還是使用之前簡單的 Card 擋一下,今天要把他刻漂亮一點,我們預計會使用 react-native-parallax-view 來做視差的效果,然後再用 react-native-vector-icons 裡面的 Font Awesome Icon 點啜一下,所以會需要之前學會的技巧 React Native 如何使用人家寫好的元件,預計結果會長這樣
PostDetail 完整程式碼
因為我們使用了 react-native-parallax-view
、react-native-vector-icons
,因為 react-native-vector-icons
是有用到 Native Code 的,所以記得要 link 喔。
這邊我們可以看到有使用到一個小技巧,如果重複的 Child Component,可以寫成一個 Function 然後用{this.rankStar(4)}
這樣的形式把 Component render 出來,其實這樣的方法就很像是偷懶的 dump Component,如果有時間重構的話建議把它寫成 dump Component,這樣對可讀性有大大的幫助喔。
有問題歡迎來 React Native Taiwan 問喔
創科資訊