Sie haben versucht, den Schlüssel auf ein Objekt, das gemeint ist, unveränderlich und eingefroren wurde

Das Problem

Wenn Sie field.active = true; oder this.previousField.active = false;, die Sie Bearbeiten, ein Objekt ( field ), die in der Datenquelle des ListView. Die ListView den Fehler auslöst, weil es friert der datasource-wenn Sie es schaffen, mit cloneWithRows. Dies ist, um sicherzustellen, dass die datasource kann nicht geändert werden, die außerhalb der normalen Reagieren Komponente Lebenszyklus (wie setState). Stattdessen ListView.DataSource Objekte sind entworfen, um sich mit cloneWithRows gibt eine kopieren der vorhandenen datasource.

Wenn Sie vertraut sind mit der Redux library, es ist sehr ähnlich wie die Philosophie mit reducer-Funktionen geben einen kopieren des Staates, eher als Modifikation des bestehenden Staates.

Klonen Sie die DataSource -

Um dieses problem zu lösen, anstatt mutiert field Objekte in Ihrem handleClick Funktion, was Sie wirklich wollen, zu tun ist, erstellen Sie eine neue Daten-array mit Werten, die bereits (wie active), und rufen Sie dann setState mit einer neuen Datenquelle für den ListView erstellt mit cloneWithRows. Wenn Sie dies tun, die Sie eigentlich gar nicht brauchen, die annotations Schlüssel in Ihrem Zustand überhaupt.

Code ist wahrscheinlich hilfreicher als Worte hier:

handleClick(field) {

  //iterate over annotations, and update them.
  //I'm taking 'title' as a unique id property for each annotation, 
  //for the sake of the example.
  const newAnnotations = annotations.map(a => {
    //make a copy of the annotation.  Otherwise you'll be modifying
    //an object that's in your listView's datasource,
    //and therefore frozen.
    let copyA = {...a};
    if (copyA.title === field.title) {
      copyA.active = true;
    } else {
      copyA.active = false;
    }
    return copyA;
  });

  this.setState({
    region: {...field, active: true},
    dataSource: this.state.dataSource.cloneWithRows(newAnnotations),
  });
}

Ich hoffe, das hilft! Hier ist ein code-snippet mit dem vollständigen code, den Sie geschrieben, mit meinen änderungen. Es funktioniert für mich nur, wie du es beschrieben hast, sollte auf iOS verwenden, Reagieren die Einheimischen auf 0,29. Sie hat die Frage nach android-mapview, also bin ich davon ausgegangen, dass Sie mit Android, aber die Plattform sollte nicht wirklich einen Unterschied machen in diesem Fall.

JS:

'use strict';

import React, {Component} from 'react';
import {AppRegistry,View,ListView,MapView,Text,TouchableOpacity} from 'react-native';

var annotations = [
        {
          title: 'A',active: false,latitude: 45,longitude: 26,latitudeDelta: 0.015,longitudeDelta: 0.015,
        },{
          title: 'B',active: false,latitude: 49,longitude: 14,latitudeDelta: 0.015,longitudeDelta: 0.015,
        },{
          title: 'C',active: false,latitude: 26,longitude: 25,latitudeDelta: 0.015,longitudeDelta: 0.015,
        }
      ]

class SampleApp extends Component {

  constructor(props) {
    super(props);
    var ds = new ListView.DataSource({
        rowHasChanged: (row1, row2) => row1 !== row2,
    });
    this.state = {
      region: annotations[0],
      dataSource: ds.cloneWithRows(annotations)
    };
  }

  handleClick(field) {

    //iterate over annotations, and update them.
    //I'm taking 'title' as a unique id property for each annotation, 
    //for the sake of the example.
    const newAnnotations = annotations.map(a => {
      //make a copy of the annotation.  Otherwise you'll be modifying
      //an object that's in your listView's datasource,
      //and therefore frozen.
      let copyA = {...a};
      if (copyA.title === field.title) {
        copyA.active = true;
      } else {
        copyA.active = false;
      }
      return copyA;
    });

    this.setState({
      region: {...field, active: true},
      dataSource: this.state.dataSource.cloneWithRows(newAnnotations),
    });
  }

  renderField(field) {
    console.log(field);
    let color = (field.active == true)?'blue':'yellow';

    return (
      <TouchableOpacity onPress={this.handleClick.bind(this,field)}>
        <Text style={{backgroundColor:color,borderWidth:1}}>{field.title}</Text>
      </TouchableOpacity>
    );
  }

  render() {
    return (
      <View style={{flex:1,flexDirection:'column',alignSelf:'stretch'}}>
        <MapView
          style={{flex:0.5,alignSelf:'stretch',borderWidth:1}}
          region={this.state.region}
          annotations={this.state.annotations}
        />
        <ListView
          dataSource={this.state.dataSource}
          renderRow={(field) => this.renderField(field)}
        />
      </View>
    );
  }
}

AppRegistry.registerComponent('SampleApp', () => SampleApp);