如何使多边形感叹词反应自然

Question

我在react native中制作了一些方块，我希望它们在按下时改变颜色。这是我的尝试。这是我的app.js.PS。方块的警戒线是从另一个文件导入的我尝试了很多方法，但都没用。所以，如果你能修改我的来源，我将优先考虑从"React"导入React，｛Component｝；从"反应本机"导入按钮

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
}
})`

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