Question

如果列表包含大数据源，则React Native ListView在调用this.setState后不会重新呈现其行，即如果我有少量行（1到9），一切正常，但如果我添加更多数据，那么重新渲染不会发生。

关于这个主题有类似的帖子，但我没有找到解决这个问题的任何帖子。

以下是一些简化的示例代码：

render() {
    return (
        <View style={Styles.listContainer}>
            <ListView
                dataSource={this.state.triggerDataSource}
                enableEmptySections={true}
                renderRow={(data) => this._renderListRow(data)}
                renderHeader={() => this._renderListHeader()}/>
        </View>
    );
}

...

_renderListRow(data) {
    return (
        <View style={Styles.listRow}>
            {this._renderX(data)}
            <View style={Styles.listItem}>
                <Text style={Styles.listLabel}>{data.symbol}</Text>
            </View>
        </View>
    );
}

...

_renderX(data) {
    if (this.state.isShowing) {
        return (
            <Button>
                Some button
            </Button>
        );
    } else {
        return null;
    }
}

如果ListView数据源相对较小，则调用this.setState({isShowing: true});将触发重新渲染，并且每个行现在都将包含Button，但是当我添加更多数据时，更改状态不会执行任何操作。

编辑：我的解决方案部分正常工作（即小数据量） - 我想知道如果数据大小增加，ListView功能会发生变化的原因和方式。建议的答案不能完全回答这个问题。如果行数达到10，我的代码就会停止工作。如果它在下面，那么一切正常。

Answer 1

找到解决问题的方法：

ReactNative ListView组件使用initialListSize属性计算初始组件装载时要呈现的行数。默认情况下，initialListSize设置为10.

供参考，请参阅ReactNative ListView源代码中的以下函数，

 var DEFAULT_INITIAL_ROWS = 10;      
  getDefaultProps: function() {
    return {
      initialListSize: DEFAULT_INITIAL_ROWS,
      pageSize: DEFAULT_PAGE_SIZE,
      renderScrollComponent: props => <ScrollView {...props} />,
      scrollRenderAheadDistance: DEFAULT_SCROLL_RENDER_AHEAD,
      onEndReachedThreshold: DEFAULT_END_REACHED_THRESHOLD,
      stickyHeaderIndices: [],
    };
  }

React Native ListView不会为大数据重新渲染

1 个答案: