Question

情况：我有一个ListView of Switches
问题：开关在按下时不会改变其状态，调试每个开关都会进行检查，但在setValue结束后，开关将返回到未选中状态。 永远不会将切换呈现为已检查

这是我的代码：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  Switch,
  ListView
} from 'react-native';

export default class FriendListBody extends Component {
  constructor(props) {
    super(props);

    let friends = this.props.friends.map((friend) => {
      return {
        ...friend,
        selected: false
      }
    });

    const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });
    this.state = {
      datasource: ds.cloneWithRows(friends),
      friends
    };

    this._renderRow= this._renderRow.bind(this);
    this._setValue = this._setValue.bind(this);
  }

  render() {
    return (
      <View style={styles.container}>
        <ListView
          dataSource={this.state.datasource}
          renderRow={this._renderRow}
          style={styles.listView}
          enableEmptySections={true}
        />
      </View>
    );
  }

  _setValue(id, value) {
    let newList = this.state.friends.slice();
    let pos = -1;

    for (let i = 0; i < this.state.friends.length; i++) {
      if (id === this.state.friends[i]._id) {
        pos = i;
        break;
      }
    }

    newList[pos].selected = value;
    this.setState({ 
      friends: newList, 
      datasource: this.state.datasource.cloneWithRows(newList) }
    );
  }

  _renderRow(rowData) {
    return (
      <View key={rowData._id} style={{ borderRadius: 10 }}>
        <Switch
          onValueChange={(value) => this._setValue(rowData._id, value)}
          style={{ marginBottom: 10 }}
          value={ rowData.selected } />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#d9d9d9',
  },
  listView: {
    flex: 1,
    borderColor: 'grey'
  }
});

引起我注意的一些事情是_renderRow方法只在第一次加载列表时被调用一次。

感谢您的帮助。

Answer 1

如果要更新listView，请创建新对象，而不是更新现有对象的属性。

<?xml version="1.0" encoding="UTF-8"?>
<xsd:schema xmlns:xsd="http://www.w3.org/2001/XMLSchema"
    targetNamespace="http://tii.ru/crmcom/uiconf/common"/>

    <xsd:simpleType name="nm_service">
        <xsd:restriction base="xsd:string">
            <xsd:enumeration value="vl_1" />
            <xsd:enumeration value="vl_2" />
        </xsd:restriction>
    </xsd:simpleType>
</xsd:schema>

Switch的React-Native ListView不会更新

1 个答案: