React Native：ListView 不显示所有行答案

【问题标题】：React Native: ListView not displaying all rowsReact Native：ListView 不显示所有行
【发布时间】：2025-12-20 16:05:10
【问题描述】：

我正在尝试在 React Native ListView 中显示行列表，但它只显示适合单个屏幕的条目，即，我无法向下滚动以查看更多行。

以下是样式：

styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop: 60
  },
  rowContainer: {
    flexDirection: 'row',
    justifyContent: 'space-around'
  }
})

列表视图：

return (
      <View style={styles.container}>
        {this.getHeader()}
        <ListView
          dataSource = {this.state.dataSource}
          renderRow = {this.renderRow.bind(this)}/>
      </View>
    )

行：

return (
      <View style={styles.rowContainer}>
        <Text>{text}</Text>
      </View>
    )

我做错了什么？

【问题讨论】：

标签： javascript react-native

【解决方案1】：

我遇到了同样的问题，发现带有包装器 View 的 Listview 会使 ListView 无法滚动。解决方法是删除包装视图：

return (
    <ListView
      dataSource = {this.state.dataSource}
      renderRow = {this.renderRow.bind(this)}/>
)

【讨论】：

我没有拖动鼠标，所以代码没有问题 - listview 也适用于包装视图。

【解决方案2】：

尽管 OP 已经找到了解决方案 b/c，但我还是会在此处发布此内容.我目前正在使用 React-Native v0.1.7。

事实证明，我的 ListView 不会滚动并且不会显示最初没有在屏幕上呈现的其他行的原因是它没有固定的高度。给它一个固定的高度解决了这个问题。不过，弄清楚如何确定要为高度使用什么值并不是一件简单的事情。

除了页面上的 ListView 之外，页面顶部还有一个具有固定高度的标题。我希望 ListView 占据剩余的高度。在这里，要么我使用 React-Native 有限的 FlexBox 实现的能力失败了，要么实现了。但是，我无法让 ListView 填满剩余的空间并且能够正常滚动。

我所做的是需要尺寸包const Dimensions = require('Dimensions');，然后为设备窗口的尺寸设置一个变量const windowDims = Dimensions.get('window'); 完成后，我能够确定剩余空间的高度并将该内联应用于ListView 的样式：<ListView style={{height: windowDims.height - 125}} ... /> 其中 125 是标题的高度。

【讨论】：

这个方法对我有用 - 我在 View 中有我的 ListView。
我不知道它是否会解决这个问题，或者将来人们是否会来看这个线程，但这可能也已经通过 React-Native 的 v0.22 解决了：@987654321 @
这在 React-Native 的 0.26.1 中仍然是一个问题。我必须指定一个高度才能让我的 ListView 滚动。

【解决方案3】：

在滚动视图中包装列表视图和其他内容。这解决了我的滚动问题。

【讨论】：

但这似乎不是一个可以接受的解决方案，不是吗？如果 ListView 意味着具有 ScrollView 的属性，那么为什么必须添加这个父元素？并不是说张贴者这样做是错误的，而是为什么 RN 需要这样做？
虽然 ListView 具有 ScrollView 的属性，但如果包含它的东西没有，那么它就不会滚动。所以如果你发现你的 ListView 没有滚动，这个答案是正确的。

【解决方案4】：

对我有用的是遵循以下回复：https://*.com/a/31500751/1164011

基本上，我有

<View>
  <ListView/>
</View>

发生的事情是<View> 组件的高度为 0。所以我需要将其更新为：

<View style={{ flex: 1 }}>
  <ListView/>
</View>

这样<View>会根据内容获取高度。

【讨论】：

【解决方案5】：

ListView 包含一个内部 ScrollView，因此它应该按原样工作。在模拟器上通过单击并拖动鼠标滚动。

你为什么不显示完整的代码，也许是一些截图？

【讨论】：

天哪，我觉得自己像个白痴。我没有拖动鼠标，只是向下滚动。泰！
@tldr 哇，我也是——这是我第一次读到需要鼠标向下拖动，谢谢！