如何解决如何使多边形交互反应原生?
我用 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,});
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。