Question

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

以下是样式：

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

的ListView：

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 with wrapper View outside会使ListView不可滚动。解决方法是删除包装器View：

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

Answer 2

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

原来我的ListView不会滚动的原因＆amp;不会透露其他没有最初在屏幕上呈现的行是它没有固定的高度。给它一个固定的高度解决了这个问题。弄清楚如何确定用于高度的值不是一件简单的事情。

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

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

Answer 3

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

Answer 4

对我有用的是遵循此回复：https://stackoverflow.com/a/31500751/1164011

基本上，我有

<View>
  <ListView/>
</View>

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

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

这样<View>根据内容得到它的高度。

Answer 5

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

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

React Native：ListView不显示所有行

5 个答案: