還蠻酷炫的玩法。
map
透過 map()，只要妳寫過 React 都一定會用的方法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| export default function App() {
const [people, setPeople] = useState([
{ name: 'PeaNu', key: 1},
{ name: 'PPB', key: 2},
{ name: 'Jacky', key: 3},
{ name: 'Dantin', key: 4},
{ name: 'Stachy', key: 5},
{ name: 'Altin', key: 6},
{ name: 'Alex', key: 7},
{ name: 'Barbur', key: 8},
{ name: 'Candy', key: 9},
{ name: 'Coco', key: 10},
])
return (
<View style={styles.container}>
<ScrollView>
{people.map(item => (
<View key={item.key} style={styles.item}>
<Text style={styles.itemText}>{item.name}</Text>
</View>
))}
</ScrollView>
</View>
);
}
|
FlasList
第二種做法是用一個叫做 FlatList 的元件，先來看他的用法：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| import { FlatList } from "react-native"
export default function App() {
const [people, setPeople] = useState([
{ name: 'PeaNu', key: 1},
{ name: 'PPB', key: 2},
{ name: 'Jacky', key: 3},
{ name: 'Dantin', key: 4},
{ name: 'Stachy', key: 5},
{ name: 'Altin', key: 6},
{ name: 'Alex', key: 7},
{ name: 'Barbur', key: 8},
{ name: 'Candy', key: 9},
{ name: 'Coco', key: 10},
])
return (
<View style={styles.container}>
<FlatList
data={people}
renderItem={({ item }) => (
<View style={styles.item}>
<Text style={styles.itemText}>{item.name}</Text>
</View>
)}
/>
</View>
);
}
|
簡單來說就是傳 data 跟 renderItem 這兩個 props 給他，一個要放資料，一個要放渲染函式。
特別解釋ㄧ下渲染函式的部分，這裡會拿到的參數是一個 Object，但我們真正需要的是裡面的 item 屬性。因為這個才是我們真正丟進去的資料，所以才會用「解構」的方式拿出來。
另外透過 FlatList 渲染的列表不需要在 JSX 中加上 key，只要確保資料中有 key 就好了。（如果你沒辦法確保有 key 這個值，參考下面的 props）
除此之外 FlatList 還有個最大的特點是「Lazy Loading（延遲載入」。
意思就是如果我的資料有一大包，用 map 的話會等所有資料都載入完以後才顯示畫面，但 FlatList 的話只會載入目前畫面中所需的資料，這就是這兩者最大的差別。
順便介紹幾個 FlatList 不錯用的 props：
keyExtractor 指定要用資料中的哪個值當作 key（當資料裡沒有 key 時必用）numColumns 可以指定要渲染成幾欄（偶數 Only）contentContainerStyle 當你想對 FlatList 自己做樣式設定時，一定會用到這個