iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 23
0
Modern Web

React Native 航向真全端,建構雙平台 App系列 第 23

React Native App 實戰 (六) PostDetail - 商品頁面

  • 分享至 

  • xImage
  •  

昨天我們已經把 Home 完成並且點了下面的商品會進入 PostDetail,PostDetail 目前還是使用之前簡單的 Card 擋一下,今天要把他刻漂亮一點,我們預計會使用 react-native-parallax-view 來做視差的效果,然後再用 react-native-vector-icons 裡面的 Font Awesome Icon 點啜一下,所以會需要之前學會的技巧 React Native 如何使用人家寫好的元件,預計結果會長這樣

PostDetail 完整程式碼

因為我們使用了 react-native-parallax-viewreact-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 問喔
創科資訊


上一篇
React Native App 實戰 (五) 首頁 - 實戰 ListView
下一篇
React Native App 實戰 (七) 第一次開啟 APP 介紹頁面
系列文
React Native 航向真全端,建構雙平台 App30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言