React Native 速成 009 — 即将消失的List

我们先来看一下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 我们来显示数据。