React Native 列表組件基礎知識

ScrollView 組件

ScrollView組件是一個容器滾動組件，當容器超出指定寬高時就可以進行滾動交互。

ScrollView組件是一次性渲染所有的 React 子組件，這在性能上是比較差的，所以不建議當列表特別長的時候使用此組件。

接下來列舉幾個常用的一些屬性：

contentContainerStyle 屬性

相當于為ScrollView組件設置樣式，具體的實例如下：

<ScrollView contentContainerStyle={styles.container}></ScrollView>;const styles = StyleSheet.create({container: {padding: 8,},
});

refreshControl 屬性

結合 RefreshControl 組件一起使用，用于為 ScrollView 提供下拉刷新功能。僅適用于垂直 ScrollViews（horizontalprop 必須是 false）。

具體實例如下：

const App: React.FC = () => {const [refreshing, setRefreshing] = React.useState(false);const onRefresh = React.useCallback(() => {setRefreshing(true);setTimeout(() => {setRefreshing(false);}, 2000);}, []);return (<SafeAreaView style={styles.container}><ScrollViewcontentContainerStyle={styles.scrollView}refreshControl={<RefreshControl refreshing={refreshing} onRefresh={onRefresh} />}><Text>下拉刷新</Text></ScrollView></SafeAreaView>);
};

scrollEnabled 屬性

當為 false 時，視圖無法通過觸摸交互滾動。請注意，視圖始終可以通過調用來滾動 scrollTo。

export default function ScrollCards() {return (<View><Text style={BaseStyle.headingText}>Scroll Cards</Text><ScrollView contentContainerStyle={styles.container}>{/* 第一組關閉滑動 */}<Text style={BaseStyle.headingText}>第一組</Text><ScrollView horizontal={true} scrollEnabled={false}><View style={styles.card}><Text>Click</Text></View><View style={styles.card}><Text>To</Text></View><View style={styles.card}><Text>Me</Text></View><View style={styles.card}><Text>Run</Text></View><View style={styles.card}><Text>Demo</Text></View></ScrollView>{/* 第二組開啟滑動 */}<Text style={BaseStyle.headingText}>第二組</Text><ScrollView horizontal={true}><View style={styles.card}><Text>Click</Text></View><View style={styles.card}><Text>To</Text></View><View style={styles.card}><Text>Me</Text></View><View style={styles.card}><Text>Run</Text></View><View style={styles.card}><Text>Demo</Text></View></ScrollView></ScrollView></View>);
}

horizontal 屬性

當 true 時，滾動視圖的子級水平排列在行中，而不是垂直排列在列中。例子如上。運行效果如下圖：

SectionList 組件

此組件主要是用于分段列表展示，并且在性能上要比ScrollView組件更好。

此組件主要有如下：

可配置的可見度回調
列表標題支持
列表頁腳支持
項目分隔符支持
節標題支持
節分隔符支持
異構數據和項目渲染支持
拉動刷新
滾動加載

簡單實例如下：

export default function SectionListCards() {const DATA = [{title: "Main dishes",data: ["Pizza", "Burger", "Risotto"],},{title: "Sides",data: ["French Fries", "Onion Rings", "Fried Shrimps"],},{title: "Drinks",data: ["Water", "Coke", "Beer"],},{title: "Desserts",data: ["Cheese Cake", "Ice Cream"],},];return (<View><Text style={BaseStyle.headingText}>SectionList 組件實例</Text><SectionListstyle={styles.container}sections={DATA}keyExtractor={(item, index) => item + index}renderItem={({ item }) => (<View style={styles.item}><Text style={styles.title}>{item}</Text></View>)}renderSectionHeader={({ section: { title } }) => (<Text style={styles.header}>{title}</Text>)}/></View>);
}

運行后效果如下圖：
在這里插入圖片描述

使用此組件需要注意以下幾點：

當內容滾動出渲染窗口時，超出窗口的數據不會自動保存的系統變量中。所以需要我們使用 Flux、Redux 或者 Relay 來存儲是有需要展示的數據。
SectionList組件是 PureComponent 類型組件，這意味著如果 props 保持淺層拷貝的話，它將不會重新渲染。確保您的 renderItem 函數所依賴的所有內容都作為 prop（例如 extraData）傳遞，并且在更新后不是 === ，否則您的 UI 可能不會因更改而更新。
SectionList組件為了節省內存和實現平滑的滾動，頁面的內容展示是異步實現的，這就意味著當滑動速度快于頁面內容渲染速度的話，頁面會出現空白內容。
默認情況下，列表會在每個項目上查找 key 屬性，并將其用作 React key。或者，您可以提供自定義 keyExtractor 屬性。

組件必須的參數說明

renderItem

每個部分中每個項目的默認渲染器。可以在每個部分的基礎上覆蓋。應該返回一個 React 元素。具體代碼實例：
```
renderItem={({ item, index, section, separators }) => ( )}
```
- item(類型為對象)：需要渲染的內容數據
- index(類型為數字)：渲染內容的項目下標
- section(類型為對象)：SectionList當前渲染節點的完整對象
- separators(類型為對象)：具體有如下屬性：
  - highlight(類型為函數)：監聽元素變為高亮后可以觸發的事件
  - unhighlight(類型為函數)：監聽元素取消高亮后可以觸發的事件
  - updateProps(類型為函數)：函數接收select和newProps兩個屬性。
sections

需要渲染的數據

FlatList 組件

FlatList組件租用是用于展示基本、平面列表的高性能界面，具有如下功能：

可選水平模式
可配置的可見度回調
標頭支持
頁腳支持
分隔符支持
拉動刷新
滾動加載
滾動到索引支持
多列支持

具體的實例如下：

const DATA = [{id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title: "First Item",},{id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title: "Second Item",},{id: "58694a0f-3da1-471f-bd96-145571e29d72",title: "Third Item",},
];type ItemProps = { title: string };const Item = ({ title }: ItemProps) => (<View style={styles.item}><Text style={styles.title}>{title}</Text></View>
);export default function FlatListCards() {return (<View><Text style={BaseStyle.headingText}>FlatListCards</Text><FlatListdata={DATA}renderItem={({ item }) => <Item title={item.title} />}keyExtractor={(item) => item.id}/></View>);
}const styles = StyleSheet.create({container: {flex: 1,},item: {backgroundColor: "#f9c2ff",padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 24,},
});

運行效果如下：
在這里插入圖片描述
要渲染多列，請使用numColumns。使用此方法而不是 flexWrap 布局可以防止與項目高度邏輯發生沖突。在上述的例子中，我們添加numColumns屬性就可以，關鍵代碼如下：

<FlatListnumColumns={2}data={DATA}renderItem={({ item }) => <Item title={item.title} />}keyExtractor={(item) => item.id}
/>

運行效果如下：
在這里插入圖片描述
實現更加復雜、可選的實例：

type ItemData = {id: string;title: string;
};const DATA: ItemData[] = [{id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba",title: "First Item",},{id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63",title: "Second Item",},{id: "58694a0f-3da1-471f-bd96-145571e29d72",title: "Third Item",},
];type ItemProps = {item: ItemData;onPress: () => void;backgroundColor: string;textColor: string;
};const Item = ({ item, onPress, backgroundColor, textColor }: ItemProps) => (<TouchableOpacityonPress={onPress}style={[styles.item, { backgroundColor }]}><Text style={[styles.title, { color: textColor }]}>{item.title}</Text></TouchableOpacity>
);export default function FlarCardsClick() {const [selectedId, setSelectedId] = useState<string>();const renderItem = ({ item }: { item: ItemData }) => {const backgroundColor = item.id === selectedId ? "#6e3b6e" : "#f9c2ff";const color = item.id === selectedId ? "white" : "black";return (<Itemitem={item}onPress={() => setSelectedId(item.id)}backgroundColor={backgroundColor}textColor={color}/>);};return (<View><Text style={BaseStyle.headingText}>FlarCardsClick</Text><FlatListdata={DATA}renderItem={renderItem}keyExtractor={(item) => item.id}extraData={selectedId}/></View>);
}const styles = StyleSheet.create({item: {padding: 20,marginVertical: 8,marginHorizontal: 16,},title: {fontSize: 24,},
});

運行效果如下：
在這里插入圖片描述

使用此組件需要注意以下幾點：

當內容滾動出渲染窗口時，超出窗口的數據不會自動保存的系統變量中。所以需要我們使用 Flux、Redux 或者 Relay 來存儲是有需要展示的數據。
flatList組件是 PureComponent 類型組件，這意味著如果 props 保持淺層拷貝的話，它將不會重新渲染。確保您的 renderItem 函數所依賴的所有內容都作為 prop（例如 extraData）傳遞，并且在更新后不是 === ，否則您的 UI 可能不會因更改而更新。
flatList組件為了節省內存和實現平滑的滾動，頁面的內容展示是異步實現的，這就意味著當滑動速度快于頁面內容渲染速度的話，頁面會出現空白內容。
默認情況下，列表會在每個項目上查找 key 屬性，并將其用作 React key。或者，您可以提供自定義 keyExtractor 屬性。

組件必須的參數說明

renderItem

每個部分中每個項目的默認渲染器。可以在每個部分的基礎上覆蓋。應該返回一個 React 元素。具體代碼實例：
```
renderItem={({ item, index, section, separators }) => ( )}
```
- item(類型為對象)：需要渲染的內容數據
- index(類型為數字)：渲染內容的項目下標
- separators(類型為對象)：具體有如下屬性：
  - highlight(類型為函數)：監聽元素變為高亮后可以觸發的事件
  - unhighlight(類型為函數)：監聽元素取消高亮后可以觸發的事件
  - updateProps(類型為函數)：函數接收select和newProps兩個屬性。
data

需要渲染的數據

VirtualizedList 組件

一般來說，只有當您需要比 FlatList 提供的更多靈活性時才應該真正使用VirtualizedList。可以通過對應的屬性來對需要渲染的數據進行操作后再渲染，比之前的列表組件更加靈活一些。

VirtualizedList 組件通過對應的屬性來維護需要渲染的頁面元素，并且用適當的空白區域來替換窗口之外的所有項目，從而極大地提高了大型列表的內存消耗和性能。

具體實例如下：

type ItemData = {id: string;title: string;
};// 獲取數據，這里是直接就返回處理后的數據
const getItem = (_data: unknown, index: number): ItemData => ({id: Math.random().toString(12).substring(0),title: `Item ${index + 1}`,
});// 列表的總數
const getItemCount = (_data: unknown) => 50;type ItemProps = {title: string;
};// 渲染的組件
const Item = ({ title }: ItemProps) => (<View style={styles.item}><Text style={styles.title}>{title}</Text></View>
);export default function VirtualizedListCaards() {return (<View><Text style={BaseStyle.headingText}>VirtualizedListCards</Text><VirtualizedListinitialNumToRender={10}renderItem={({ item }) => <Item title={item.title} />}keyExtractor={(item) => item.id}getItemCount={getItemCount}getItem={getItem}/></View>);
}const styles = StyleSheet.create({item: {backgroundColor: "#f9c2ff",height: 150,justifyContent: "center",marginVertical: 8,marginHorizontal: 16,padding: 20,},title: {fontSize: 32,},
});

使用此組件需要注意以下幾點：

當內容滾動出渲染窗口時，超出窗口的數據不會自動保存的系統變量中。所以需要我們使用 Flux、Redux 或者 Relay 來存儲是有需要展示的數據。
flatList組件是 PureComponent 類型組件，這意味著如果 props 保持淺層拷貝的話，它將不會重新渲染。確保您的 renderItem 函數所依賴的所有內容都作為 prop（例如 extraData）傳遞，并且在更新后不是 === ，否則您的 UI 可能不會因更改而更新。
flatList組件為了節省內存和實現平滑的滾動，頁面的內容展示是異步實現的，這就意味著當滑動速度快于頁面內容渲染速度的話，頁面會出現空白內容。
默認情況下，列表會在每個項目上查找 key 屬性，并將其用作 React key。或者，您可以提供自定義 keyExtractor 屬性。