react-native 简单的例子

示例

ListView-一个核心组件,旨在有效显示更改数据的垂直滚动列表。最小的API是创建一个ListView.DataSource,用一个简单的数据Blob数组填充它,并使用该数据源和renderRow回调实例化一个ListView组件,该回调从数据数组中获取Blob并返回可渲染的组件。

最小示例:

getInitialState: function() {
  var ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
  return {
    dataSource: ds.cloneWithRows(['row 1', 'row 2']),
  };
},

render: function() {
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData) => <Text>{rowData}</Text>}
    />
  );
},

ListView还支持更高级的功能,包括具有粘性节标题的节,页眉和页脚支持,到达可用数据末尾的回调(onEndReached)和设备视口更改中可见的行集(onChangeVisibleRows),以及几个性能优化。

有一些性能操作旨在使ListView平滑滚动,同时动态加载潜在的非常大(或概念上无限)的数据集:

  • 仅重新呈现更改的行-数据源提供的rowHasChanged函数会告知ListView是否由于源数据已更改而需要重新呈现行-有关更多详细信息,请参见ListViewDataSource。

  • 限速行渲染-默认情况下,每个事件循环仅渲染一行(可通过pageSize属性进行自定义)。这会将工作分解成较小的块,以减少渲染行时丢帧的机会。