为什么这个 ListView 只显示 10 个项目？答案

【问题标题】：Why is this ListView only showing 10 items?为什么这个 ListView 只显示 10 个项目？
【发布时间】：2016-11-20 16:27:54
【问题描述】：

（我知道有一些网站可以分享 reactnative 示例，但我无法通过 google 找到它们；“react native share code”只是提供了共享按钮的代码，“example”也是如此——什么是一个可以用来做这个的好网站？）

我有一个列表视图（感谢answer，感谢@colin-ramsay）。我想做的是将一些项目放在每个列表视图中，并让它们在它们的容器内对齐（一个复选框和一个标签在同一行）。但我无法做到这一点，因为我无法弄清楚为什么这个包含 20 个项目的数组只显示 10 个项目。

警报在触发时显示 20 项 (0-19)。

代码：

import React, {Component} from 'react';
import {View, Text, StyleSheet, ListView} from 'react-native';

var styles = StyleSheet.create({
  container:{
    marginTop:65,
    margin:10, backgroundColor:"#DDDDEE"
  },
  list:{
    height:400,
    marginTop:40,
    flexDirection:'row',
    flexWrap:'wrap', justifyContent:'center', alignItems:'flex-start'
  },
  item:{
    alignItems:'flex-start',
    backgroundColor:'red', width:40, height:40, margin:3, padding:3,
    justifyContent:'center', alignItems:'center'
  }
});

class TestCmp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({rowHasChanged:(r1, r2) => r1 !== r2});
    var data = Array.apply(null, {length:20}).map(Number.call, Number);
    alert(data);
    this.state = {dataSource:ds.cloneWithRows(data)};
  }

  render() {
    return (

      <ListView contentContainerStyle={styles.list} dataSource={this.state.dataSource} renderRow={
        (rowData) => {
          return (
            <View style={styles.item}>
              <Text>{rowData}</Text>
            </View>
          )
        }
      }/>
    );
  }
}

export default class TestPage extends Component {
  render() {
    return (
      <View style={styles.container}>
        <TestCmp/>
      </View>
    )
  }
}

其他 10 件物品发生了什么变化？我尝试使用检查器并更改容器的高度，但没有任何效果。

【问题讨论】：

标签： listview react-native

【解决方案1】：

ReactNative ListView 组件使用initialListSize 属性计算在初始组件挂载时要渲染的行数。默认情况下，initialListSize 设置为 10。

供参考，请参阅以下来自 ReactNative ListView 源代码的函数，

  var DEFAULT_INITIAL_ROWS = 10;      
  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      renderScrollComponent: props => <ScrollView {...props} />,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
      stickyHeaderIndices: [],
    };
  }

如果你想让 ListView 默认呈现所有项目，那么你可以使用 ListView 组件中的initialListSize 属性，如下代码所示

<ListView contentContainerStyle={styles.list}
                initialListSize={20}
                dataSource={this.state.dataSource} renderRow={
        (rowData) => {
          return (
            <View style={styles.item}>
              <Text>{rowData}</Text>
            </View>
          )
        }
      }/>

【讨论】：

这完全是愚蠢的。那个容器很大——为什么它会决定只在页面完全为空时随机显示一些项目？将Array.map 与View 元素一起使用会更好吗？看起来更简单，没有有趣的规则。
是的。如果元素数量不多，则没有理由使用 ListView。
使用 ListView 的主要好处是渲染优化，因此将 initialListSize 设置为项目计数使其绝对无用。对于复杂的列表项，即使是 10 次初始渲染也可能足以使 UI 无响应。

【解决方案2】：

ListView 根据项目高度（垂直列表）或项目宽度（水平列表）确定可见行。您有垂直列表 (horizontal={false})，因此对于 ListView，您的布局如下所示：

ListView 渲染 10 个项目，因为默认情况下它是最少渲染计数 (initialListSize)。

您应该手动将项目放置在行中并在 ListView 中呈现行或搜索任何网格视图组件。

【讨论】：