React-native ListView 不显示所有内容，在底部反弹（IOS）答案

【问题标题】：React-native ListView not showing all content, bounces back at bottom (IOS)React-native ListView 不显示所有内容，在底部反弹（IOS）
【发布时间】：2016-01-17 04:43:48
【问题描述】：

这是我用来在 ListView 中显示从 JSON Api 返回的项目列表的代码。

render(){ var listHeight  = this.state.itemCount ? ((this.state.itemCount) * 115 ) : 0;
        var itemsHeight = 460;

        itemsListView = (<ListView bounces={true} style={{height: itemsHeight}} contentContainerStyle={{height: listHeight}}
            dataSource={this.state.dataSource}
            renderRow={this.renderRow.bind(this)} automaticallyAdjustContentInsets={false} initialListSize={4} />); }

但是，ListView 组件不允许我查看最后一项或两项。（当设备处于横向时修剪更多内容）

renderRow 方法返回高度为 115 的行，如下所示：

return (
<TouchableHighlight onPress={() => this.rowPressed(rowData)}
    style={{height: 115}}>...</TouchableHighlight>

设置 ListView 样式和 contentContainerStyle 以在两个设备方向上显示所有行的正确方法是什么？

【问题讨论】：

标签： listview react-native

【解决方案1】：

编辑：我注意到您的问题是关于方向改变或横向时的问题。这个答案可能不会解决这个问题。但如果有帮助的话，我暂时把它留在这里。

我有类似的 ListView 问题，底部项目没有完全显示。我只是将可滚动区域的高度设置为设备高度并减去顶部的标题和其他东西的高度。

像这样：

const {
  Dimensions,
  ListView,
  StyleSheet
} = React;

const Viewport = Dimensions.get('window');

...

render() {
  return (
    <ListView ... style={styles.listView} />
  )
}

...

let styles = StyleSheet.create({
  listView: {
    height: Viewport.height
  }
});

flex: 1 样式也可以解决您的问题，因此您可以先尝试一下。

【讨论】：

嗨，将 flex: 1 设置为所有父组件解决了这个问题。谢谢。
文档中没有明确说明，但是 ListViews 和其他 ScrollViews 需要有一个高度大于 0 的父级。设置 'flex: 1' 是实现这一点的一种方法。

【解决方案2】：

不能完美回答这个问题，但可能会有所帮助.. 我设置了顶部、左侧、右侧，但不是底部，这导致滚动视图为全高，因此不需要滚动。

【讨论】：