Question

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

这是我的代码：

1）在构造函数中创建dataSource：

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"
     />
}/>

Answer 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"
          />
    }/>
);

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

1 个答案: