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

Question

我在 react-native 中制作了一些方块，我希望它们在你按下它们时改变它们的颜色。这是我的尝试。这是我的 app.js。附言。正方形的环线是从另一个文件导入的，我尝试了很多东西，但没有奏效。所以，如果你能修改我的源代码，我会从'react'中获取import React，{Component}；从'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
  }
})`

标签： react-nativegoogle-mapsgoogle-maps-react

Answer 1

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

这是下面的示例代码和代码片段。

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,
  },
});