React Native ListView 不使用自定义 ScrollView 显示所有数据答案

【问题标题】：React Native ListView doesn't display all data with custom ScrollViewReact Native ListView 不使用自定义 ScrollView 显示所有数据
【发布时间】：2016-03-21 16:32:57
【问题描述】：

React Native ListView 首先只显示一半的内容。然后没有正确更新。

这是我的代码：

1) 在构造函数中创建数据源：

const dataSource = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1.id !== r2.id });

2) 加载我的内容后

this.setState({ dealsList: this.state.dataSource.cloneWithRows(response.data), hasNextPage: hnp });

3) 在渲染函数内部

<ListView
    dataSource={this.state.dealsList}
    renderRow={this._renderDealRow.bind(this)}
    renderFooter={this.renderLoadMoreButton.bind(this)}
    renderScrollComponent={this.renderScroll.bind(this)}
/>

响应数组的长度是 20。但我的 ListView 中只看到 10 行

更新

我发现原因是我使用了自定义滚动视图。我的滚动视图是

<ScrollView
    style={styles.scrollview}
    refreshControl={
          <RefreshControl
            refreshing={this.state.reloading}
            onRefresh={() => {
                this.setState({reloading: true});
                this.load(1);
            }}
            tintColor={commonStyles.colors.primary}
            colors={['white']}
            progressBackgroundColor="#00b7bb"
     />
}/>

【问题讨论】：

在您的数据源方法中，您正在将行与它们的 id 进行比较，您确定有些没有相同的 id 吗？
即使我将此功能设置为真/假。我也会遇到同样的问题

标签： listview react-native

【解决方案1】：

好的，原因是我使用了自定义 ScrollView 并且没有在组件中包含道具。要解决这个问题，我必须将我的 renderScroll 函数更改为

return (
    <ScrollView
        {...props} // this line
        style={styles.scrollview}
        refreshControl={
          <RefreshControl
            refreshing={this.state.dealsReloading}
            onRefresh={() => {
                this.setState({dealsReloading: true});
                this.loadDeals(1);
            }}
            tintColor={commonStyles.colors.primary}
            colors={['white']}
            progressBackgroundColor="#00b7bb"
          />
    }/>
);

【讨论】：