我們先來看一下ListView的介紹鸽嫂，這個(gè)組件是不是很高端大氣上檔次边酒！
ListView組件用于顯示一個(gè)垂直的滾動(dòng)列表僚碎，其中的元素之間結(jié)構(gòu)近似而僅數(shù)據(jù)不同。
ListView更適于長列表數(shù)據(jù)抠藕，且元素個(gè)數(shù)可以增刪饿肺。和ScrollView
不同的是，ListView
并不立即渲染所有元素盾似，而是優(yōu)先渲染屏幕上可見的元素敬辣。
ListView組件必須的兩個(gè)屬性是dataSource和renderRow。dataSource是列表的數(shù)據(jù)源颜说，而renderRow則逐個(gè)解析數(shù)據(jù)源中的數(shù)據(jù)，然后返回一個(gè)設(shè)定好格式的組件來渲染汰聋。
下面的例子創(chuàng)建了一個(gè)簡單的ListView门粪，并預(yù)設(shè)了一些模擬數(shù)據(jù)。首先是初始化ListView所需的dataSource烹困，其中的每一項(xiàng)（行）數(shù)據(jù)之后都在renderRow中被渲染成了Text組件玄妈，最后構(gòu)成整個(gè)ListView。
rowHasChanged函數(shù)也是ListView的必需屬性髓梅。這里我們只是簡單的比較兩行數(shù)據(jù)是否是同一個(gè)數(shù)據(jù)（===符號(hào)只比較基本類型數(shù)據(jù)的值拟蜻，和引用類型的地址）來判斷某行數(shù)據(jù)是否變化了。
然而 ListView 快要被打入冷宮了枯饿。
https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b
取代 ListView 的新歡們分別有 FlatList*, SectionList, VirtualizedList, and *VirtualizedSectionList
FlatList
默認(rèn)情況下酝锅，F(xiàn)latList 希望你的數(shù)據(jù)源是一個(gè)數(shù)組。它API一個(gè)巨大好處是能讓你自己實(shí)現(xiàn) getItem奢方。這樣對(duì)非標(biāo)的數(shù)據(jù)格式非常有用搔扁，如不可變數(shù)據(jù)或復(fù)雜的嵌套數(shù)據(jù)爸舒。
如何從 ListView 到 FlatView
Let's see!
-import { Text, View, ListView } from 'react-native';
+import { Text, View } from 'react-native';
+import FlatList from 'react-native/Libraries/Lists/FlatList';
import style from './styles';
import listData from './listData';
class App extends Component {
- constructor(props) {
- super(props);
-
- const dataSource = new ListView.DataSource({
- rowHasChanged: (r1, r2) => r1 !== r2,
- sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
- });
-
- this.state = {
- dataSource: dataSource.cloneWithRowsAndSections(listData),
- };
- }
-
- componentWillReceiveProps(newProps) {
- this.setState({
- dataSource: this.state.dataSource.cloneWithRows(newProps.listData),
- });
- }
-
- renderRow(rowData) {
- return <Text style={style.row}>{rowData}</Text>;
+ renderItem({ item, index }) {
+ return <Text style={style.row}>{item}</Text>;
}
render() {
return (
<View style={style.container}>
<Text style={style.welcome}>
Welcome to React Native!
</Text>
- <ListView
- dataSource={this.state.dataSource}
- renderRow={this.renderRow}
+ <FlatList
+ data={listData}
+ renderItem={this.renderItem}
/>
</View>
);
}
}
是不是代碼行數(shù)大大減少？
唯一要注意的是稿蹲，默認(rèn)導(dǎo)入的react-native包沒有這些扭勉，這些組件是在 master 倉庫下，所以我們需要以下代碼來獲取他們：
mkdir -p node_modules/react-native/Libraries/Lists/ && \
for file in 'FlatList' 'MetroListView' 'SectionList' 'VirtualizedList' 'VirtualizedSectionList' 'ViewabilityHelper' 'VirtualizeUtils'; \
do curl https://raw.githubusercontent.com/facebook/react-native/master/Libraries/Lists/${file}.js > node_modules/react-native/Libraries/Lists/${file}.js; \
done
這些代碼會(huì)下載最新版本的FlatList和依賴到node_modules目錄苛聘。然后你就可以像上面的例子那樣引入了涂炎。
更詳細(xì)的示例可以參考 FlatListExample 和 example app
下一課結(jié)合 networking 和 flatlist 我們來顯示數(shù)據(jù)。
