如何使多边形交互反应原生？

问题描述

我用 react-native 制作了一些方块，我希望它们在你按下它们时改变它们的颜色。这是我的尝试。这是我的 app.js。附注。正方形的线是从另一个文件导入的 我尝试了很多东西，但没有奏效。所以请如果你能修改我的来源我会apriciate import React,{ Component } from 'react'; 从'react-native'导入按钮

import {
  SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,} from 'react-native';

import {
  Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';

import MapView,{ PROVIDER_GOOGLE,Marker,Heatmap,Circle,polyline,polygon } from 'react-native-maps'
import {locations} from './Data/Data'



export default class App extends Component {
  constructor(props){
    super(props);
    this.state = {
      latitude:     0,longitude: 0,error: null
    }
  }
  componentDidMount (){
    navigator.geolocation.getCurrentPosition(position =>{
      this.setState({
        latitude:position.coords.latitude,longitude:position.coords.longitude,error:null

      });
    },error=> this.setState({error:error.message}),{enableHighAccuracy:true,timeout : 2000,maximumAge : 2000});
  }
  render() {
    var squarez = [];    
      for( let i = 0; i <2916; i +=4) {
        squarez.push(
          {
            coordinates: [
              { latitude: locations[i].latitude,longitude: locations[i].longitude },{  latitude: locations[i+1].latitude,longitude: locations[i+1].longitude },{  latitude: locations[i+3].latitude,longitude: locations[i+3].longitude },{  
                latitude: locations[i+2].latitude,longitude: locations[i+2].longitude  }
             
          ],open: false,}
        )
      } 
      toggle(polygon){
        polygon.open = !polygon.open;
    
        if (polygon.open) {
          fillColor= "#8f353b"
        }
    
      }
    
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={{
            latitude:   44.439663,longitude: 26.096306,latitudeDelta: 0.0922,longitudeDelta: 0.0421,}}
        >
         {      
              squarez.map((polygon,index) => (
            <View key={index}>
              <polygon
                coordinates={polygon.coordinates}
                onPress={() => this.toggle(polygon)}
              /> 
              </View>))
  }
              
               
<Marker coordinate={ this.state}/>
        </MapView>
      </View>
    )
  }

}

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: 'red' 
  },map: {
    flex: 1
  }
})`

解决方法

您也可以使用 onPress 并调用 toggle function，您需要使用 tappable={true} 才能点击多边形。要更改多边形的颜色，您需要使用 fillColor。将 fillColor 的值设置为 state，然后更改 toggle function 中的状态。

下面是 sample code 和代码片段。

import React,{ Component } from 'react';
import {
  SafeAreaView,StyleSheet,ScrollView,View,Text,StatusBar,} from 'react-native';

import {
  Header,LearnMoreLinks,Colors,DebugInstructions,ReloadInstructions,} from 'react-native/Libraries/NewAppScreen';

import MapView,{
  PROVIDER_GOOGLE,Marker,Heatmap,Circle,Polyline,Polygon,} from 'react-native-maps';
import locations from './data.json';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      latitude: 0,longitude: 0,error: null,fillColor: '#8f353b',};
  }
  componentDidMount() {}

  toggle = () => {
    console.log('pressed');
    if (this.state.fillColor === '#8f353b') {
      this.setState({
        fillColor: '#000000',});
    } else {
      this.setState({
        fillColor: '#8f353b',});
    }

    //polygon.open = !polygon.open;

    // if (polygon.open) {
    //fillColor= "#8f353b"
    // }
  };

  render() {
    // console.log(locations[0].latitude)
    var squarez = [];
    for (let i = 0; i < locations.length; i += 4) {
      squarez.push({
        coordinates: [
          {
            latitude: locations[i].latitude,longitude: locations[i].longitude,},{
            latitude: locations[i + 1].latitude,longitude: locations[i + 1].longitude,{
            latitude: locations[i + 3].latitude,longitude: locations[i + 3].longitude,{
            latitude: locations[i + 2].latitude,longitude: locations[i + 2].longitude,],open: false,});
    }

    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          initialRegion={{
            latitude: 32.321,longitude: -64.757,latitudeDelta: 0.0922,longitudeDelta: 0.0421,}}>
          {squarez.map((polygon,index) => (
            <View key={index}>
              <Polygon
                coordinates={polygon.coordinates}
                onPress={this.toggle}
                tappable={true}
                fillColor={this.state.fillColor}
              />
            </View>
          ))}

          <Marker coordinate={this.state} />
        </MapView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,backgroundColor: 'red',map: {
    flex: 1,});