我们先来看一下ListView的介绍，这个组件是不是很高端大气上档次！
ListView组件用于显示一个垂直的滚动列表，其中的元素之间结构近似而仅数据不同。
ListView更适于长列表数据，且元素个数可以增删。和ScrollView
不同的是，ListView
并不立即渲染所有元素，而是优先渲染屏幕上可见的元素。
ListView组件必须的两个属性是dataSource和renderRow。dataSource是列表的数据源，而renderRow则逐个解析数据源中的数据，然后返回一个设定好格式的组件来渲染。
下面的例子创建了一个简单的ListView，并预设了一些模拟数据。首先是初始化ListView所需的dataSource，其中的每一项（行）数据之后都在renderRow中被渲染成了Text组件，最后构成整个ListView。
rowHasChanged函数也是ListView的必需属性。这里我们只是简单的比较两行数据是否是同一个数据（===符号只比较基本类型数据的值，和引用类型的地址）来判断某行数据是否变化了。
然而 ListView 快要被打入冷宫了。
https://hackernoon.com/react-native-new-flatlist-component-30db558c7a5b
取代 ListView 的新欢们分别有 FlatList*, SectionList, VirtualizedList, and *VirtualizedSectionList
FlatList
默认情况下，FlatList 希望你的数据源是一个数组。它API一个巨大好处是能让你自己实现 getItem。这样对非标的数据格式非常有用，如不可变数据或复杂的嵌套数据。
如何从 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>
);
}
}
是不是代码行数大大减少？
唯一要注意的是，默认导入的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
这些代码会下载最新版本的FlatList和依赖到node_modules目录。然后你就可以像上面的例子那样引入了。
更详细的示例可以参考 FlatListExample 和 example app
下一课结合 networking 和 flatlist 我们来显示数据。
