React-native ListView不显示所有内容,在底部反弹(IOS)

发布时间：2020-12-15 20:12:04 所属栏目：百科来源：网络整理

导读：这是我用来显示从ListView中的 JSON Api返回的项目列表的代码. render(){ var listHeight = this.state.itemCount ? ((this.state.itemCount) * 115 ) : 0; var itemsHeight = 460; itemsListView = (ListView bounces={true} style={{height: itemsHeight}}

这是我用来显示从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类似的问题,底部项目没有完全显示.我只是将可滚动区域的高度设置为设备高度,并在顶部减去标题和其他内容的高度.

像这样：

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可以解决您的问题,所以您可以先尝试.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!