React Native：ListView 不显示所有行

Question

我试图在 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>
    )

我做错了什么？

Answer 1

ListView 包含一个内部 ScrollView，因此它应该可以正常工作。在模拟器上通过单击并拖动鼠标进行滚动。

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

Answer 2

我有同样的问题，发现外面有包装视图的 Listview 会使 ListView 不可滚动。解决方法是删除包装视图：

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

Answer 3

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

Answer 4

我会 post 尽管 OP 已经找到了解决方案 b/c 我的 ListView 也不会滚动而且它不是 b/c 我正在尝试滚动而不是使用鼠标来模拟滑动。我目前正在使用 React-Native v0.1.7.

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

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

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

的高度

Answer 5

对我有用的是遵循以下回复：

基本上，我

<View>
  <ListView/>
</View>

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

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

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

React Native：ListView 不显示所有行

React Native: ListView not displaying all rows

javascript

react-native