Question

这是我用来显示从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以显示两个设备方向中的所有行的正确方法是什么？

Answer 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也可以解决您的问题，因此您可以先尝试一下。

Answer 2

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

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

2 个答案: