Question

我创建了一个使用onRegisterApi: function(gridApi){ $scope.gridApi = gridApi; $scope.gridApi.grid.registerRowsProcessor( $scope.singleFilter, 200 ); }来显示联系人列表的组件。单击一行时，我会更新包含所有选定联系人的ListView组件中的数组。但是，我没有将此数组用作state组件的dataSource。

我想在每次修改此数组时重绘ListView，以便显示所选联系人的图像。

以下是我目前情况的一个例子：

ListView

我尝试拨打renderListView: function(){ <ListView dataSource={this.state.dataSource} renderRow={this.renderRow} style={styles.listView} /> } renderRow:function(row){ return if(this.state.something === true) <Text>Something</Text> else <Text>Something Else</Text> }，调用.forceUpdate()方法，但不调用render方法。

有什么建议吗？

Answer 1

我刚才有同样的问题。在这里查看我的问题：React Native ListView not updating on data change

基本上，ListView组件似乎存在错误，您需要重建ListView数据源中更改的每个项目以重绘它。

这是一个有效的例子： https://rnplay.org/apps/GWoFWg

首先，创建数据源和数组的副本并将其保存到状态。在我的例子中，foods是数组。

constructor(props){
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
        dataSource: ds.cloneWithRows(foods),
        db: foods,
    };
}

如果要更改数据源中的内容，请将保存到的数组的副本复制到状态，使用更改重建项目，然后将更改保存到新数组（db和datasource）

onCollapse(rowID: number) {
    console.log("rowID", rowID);
    var newArray = this.state.db.slice();
    newArray[rowID] = {
        key: newArray[rowID].key,
        details: newArray[rowID].details,
        isCollapsed: newArray[rowID].isCollapsed == false ? true : false,
    };
    this.setState({
        dataSource: this.state.dataSource.cloneWithRows(newArray),
        db: newArray,
    });
}

当this.state改变时（但不是dataSource），如何强制重绘ListView。

1 个答案: