React Native Maps：放置多个标记并更改状态

Question

我目前正在开发一个使用 React Native Maps 的应用程序。我看过他们放置多个标记的示例以及如何在按下时更改标记的状态，我希望能够将这两个功能组合在一起。我希望能够放下多个标记，然后在按下时更改单个标记的状态。我已经成功放下多个标记，但按下时，所有标记的状态都会改变。我想知道该怎么做才能使标记在按下时改变各个状态。感谢大家的帮助。

以下是我使用的 React Native Maps 示例的链接： https://github.com/airbnb/react-native-maps/blob/master/example/examples/DefaultMarkers.js

https://github.com/airbnb/react-native-maps/blob/master/example/examples/MarkerTypes.js

这是我目前拥有的代码

const SPACE = 0.01;
let id = 0;

class MarkerTypes extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      marker1: true,
      region: {
        latitude: LATITUDE,
        longitude: LONGITUDE,
        latitudeDelta: LATITUDE_DELTA,
        longitudeDelta: LONGITUDE_DELTA,
      },
      markers: [],
    };
  }

  onMapPress(e) {
    console.log(e)
    this.setState({
      markers: [
        ...this.state.markers,
        {
          coordinate: e.nativeEvent.coordinate,
          key: id++,
          marker1: true,
        },
      ],
    });
  }
  render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={this.props.provider}
          style={styles.map}
          initialRegion={this.state.region}
          onPress={(e) => this.onMapPress(e)}
        >

          {this.state.markers.map(marker => (
          <MapView.Marker
            key={marker.key}
           })}
            onPress={() => {
              this.setState({ marker1: !this.state.marker1 })}
            }
            coordinate={marker.coordinate}         
            image={this.state.marker1 ? flagBlueImg : flagPinkImg}
          >
          </MapView.Marker>
          ))}
        </MapView>
      </View>
    );
  }
}

Answer 1

要更改地图上触摸的标记上的图像标记，您需要在 this.state.markers 数组内的标记上切换标记属性，例如 this.state.markers[0 ].marker1，目前您正在切换由所有标记

共享的this.state.marker1

{this.state.markers.map((marker, index) => (
    <MapView.Marker 
        key={marker.key}
        onPress={() => {
          const marker = this.state.markers[index]
          marker.marker1 = !marker.marker1
          this.setState({ markers: [
              ...this.state.markers.slice(0, index),
              marker,
              ...this.state.markers.slice(index + 1)
          ]})}
        }
        coordinate={marker.coordinate}         
        image={marker.marker1 ? flagBlueImg : flagPinkImg}
      >
      </MapView.Marker>
      ))}

通过这种方式，每个标记都在数组中使用和更新它自己的状态。

React Native Maps：放置多个标记并更改状态

React Native Maps: Multiple Markers placed and state changed

react-native

react-native-maps