react-native 简单的例子

  • Z时代
  • 2024-01-10
  • 分类：综合

示例

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属性进行自定义）。这会将工作分解成较小的块，以减少渲染行时丢帧的机会。

以上是 react-native 简单的例子 的全部内容， 来源链接： utcz.com/z/330648.html

回到顶部