前兩天的實戰(三)、(四)已經把首頁完成一半了，但是目前首頁的部分還是使用 View 來簡單顯示我們做的 Component，今天要使用 ListView 串接昨天完成的 Card，讓他能顯示多筆資料，並且在 Card 上加一個 prop onPress 讓他點擊後可以切換 Route 觀看更詳細的訊息。
預計完成結果會長這樣

這次更改了之前的 Home.js 跟 Card.js
更改的地方在 這裡
我們使用到了 React Native 基礎元件 簡介 的技巧
在加上一點點的變化把我們的 props 加進去
我們可以看到這裡

<ListView
  dataSource={dataSource}
  renderRow={(rowData, sectionID, rowID) => <Card
    {...rowData}
    imagePosition={rowID % 2 === 1 ? 'right' : 'left'}
    onPress={() => Actions.cardDetail({ ...rowData })}
  />}
/>

使用了 {...rowData} 這種手法把 props 加上去，... 是 ES6 的糖衣語法可以把 json 解構
例如:

var a = { b: 100, c: 200 };
var e = { f: 300, g: 300 };
var h = { ...a, ...e };

這樣的話
h = { b: 100, c: 200, f: 300, g: 300 }

非常方便吧，我們就是用這種特性把 props 附加上去的 同理 Actions.cardDetail({ ...rowData } 就是這樣切換 route 並把資料塞進去的喔，明天來把 Detail 刻的漂漂亮亮的吧

有問題歡迎來 React Native Taiwan 問喔
創科資訊