react-native – 如何在行数据更改时强制ReactNative ListView更新行？

在数据更新方面,ReactNative的ListView有点奇怪.

我有一个对象数组(名称：Item),它有3个属性：

> id(int)
>名称(字符串)
>启用(bool)

项目数组显示在ListView中.每行显示项目的名称和表示启用状态的复选标记(红色表示真,灰色表示假).在我的例子中,它被简化为一个简单的字符串“true”/“false”.

每行都嵌入一个带有onPress-EventHandler的TouchableOpacity,它可以切换所表示项目的启用状态.

不幸的是,ListView不会更新该行.

在调试rowHasChanged-Event时,事实证明rowHasChanged-Event永远无法确定已更改的状态,因为在切换enabled-property之后两行都已获得新状态而不对UI进行任何更新.

这是我的代码：

Item-Class：Item.js

export default class Item {

  constructor(id,name,enabled) {
    this._id = id;
    this._name = name;
    this._enabled = enabled;
  }

  get id() {return this._id}

  get name() {return this._name}
  set name(value) {this._name = value}

  get enabled() {return this._enabled}
  set enabled(value) {this._enabled = value}

}

ListView：

'use strict';

import React,{PropTypes,Component} from 'react';

import {View,TouchableOpacity,TouchableHighlight,Text,ListView,StyleSheet} from 'react-native';

import Item from './Item';

class ItemListView extends Component {

  constructor(props) {
    super(props);

    this.updateListView = this.updateListView.bind(this);
    this.toggleItemEnabled = this.toggleItemEnabled.bind(this);

    this.state = {
      dataSource: new ListView.DataSource({
                rowHasChanged: (row1,row2) => row1 != row2
            }),};
  }

  componentDidMount() {
    this.updateListView(this.props.items)
  }

  componentWillReceiveProps(nextProps) {
    this.updateListView(nextProps.items)
    }

  updateListView(items) {
    this.setState({
            dataSource: this.state.dataSource.cloneWithRows(
                items.slice() // copy items to a new array
            ),});
  }

  toggleItemEnabled(item) {
    item.enabled = !item.enabled;

    this.updateListView(this.props.items);
  }

  renderItem(item) {
    console.log('Render',item.enabled,item.name)
    return (
      <TouchableOpacity style={{flex:1}} onPress={ () => this.toggleItemEnabled(item) }>
        <View style={s.row}>
              <Text>{item.name + ' ' + item.enabled}</Text>
          </View>
      </TouchableOpacity>
    )
  }

  render() {
    return (
      <View style={s.container}>
        <ListView
          style={s.listView}
          dataSource={this.state.dataSource}
          renderRow={(item) => this.renderItem(item)}
        />
      </View>
    )
  }

}

ItemListView.propTypes = {
  items: PropTypes.array
};

ItemListView.defaultProps = {
  items: [],};

export default ItemListView;


const s = StyleSheet.create({
  container: {
  },row: {
    flex: 1,flexDirection: 'row',justifyContent: 'space-between',alignItems: 'center',marginTop: 12,paddingBottom: 12,paddingHorizontal: 30,borderBottomWidth: 1,borderBottomColor: 'gray',},innerContainer: {
    alignItems: 'center',});

如何解决这种行为,当行数据发生变化时,ListView会更新？

我认为问题是更新项目时ListView数据源没有得到更新.传递给toggleItemEnabled的项目属于state.datasource,而您正在为props.items设置数据源

解决方案1

克隆行并再次设置行

toggleItemEnabled(item,sectionId,rowId) {
    newItems = this.props.items.slice();
    newItems[rowId].enabled = !newItems[rowId].enabled;

    this.updateListView(newItems);
}

解决方案2

这是我喜欢的方式.我通常为Row创建一个单独的组件
所以你应该重构如下

创建一个新的Row.js.

constructor(props) {
    super(props);

    this.state = {
       enabled: false;
    };
 }


toggleItemEnabled() {
    this.setState({enabled: !this.state.enabled});

}

render() {
 item = this.props.data;
 return (
      <TouchableOpacity style={{flex:1}} onPress={ () => this.toggleItemEnabled() }>
        <View style={s.row}>
              <Text>{item.name + ' ' + this.state.enabled}</Text>
          </View>
      </TouchableOpacity>
    )

}

然后在渲染行方法的主要组件中调用此Row组件

renderItem(item) {
     return(
         <Row data={item} />
     );
 }