Question

我想顺序更改标记的颜色。首次渲染应用程序时，标记的所有颜色应为红色。一秒钟后，第一个标记（no-1）的颜色想变成蓝色。然后，一秒钟后第一标记颜色变为先前的状态颜色。但是第二个标记（否2）标记变为蓝色。

例如-我们有六个标记

In one-second - blue -red -red -red -red- red In two-second - red -blue - red -red -red -red In three-second - red -red -blue -red -red -red In four-second - red -red- red -blue -red -red In five-second - red -red- red -red -blue -red In six-second - red -red- red -red -red -blue

这是我的代码-活动状态正在改变，但标记的颜色没有改变。

import React from 'react';
import { View, Text, StyleSheet,Animated, Platform } from 'react- 
native';
import MapView, {AnimatedRegion,Polyline} from 'react-native-maps';

export default class App extends React.Component {
 state = {
currentLongitude: 'unknown', 
currentLatitude: 'unknown',
startTransition: 0,
endTransition: 5,
  markers: [{
    title: 'lat: 28.6095206, log: 77.1011353',
    index: 0,
    active: false,
    coordinates: {
      latitude: 28.6095206,
      longitude: 77.1011353,

    },
  },
  {
    title: 'lat: 28.6151759, log: 77.0842171',
    index: 1,
    active: false,
    coordinates: {
      latitude: 28.6151759,
       longitude: 77.0842171,

    }, 

  },
  {
    title: 'lat: 28.6242541, log: 77.0652866',
    index: 2,
    active: false,
    coordinates: {
      latitude: 28.6242541,
       longitude: 77.0652866,

    }, 

  },
  {
    title: 'lat: 28.6328224, log: 77.0863152',
    index: 3,
    active: false,
    coordinates: {
      latitude: 28.6328224,
       longitude: 77.0863152,

    }, 

  },
  {
    title: 'lat: 28.6364551, log: 77.0968294',
    index: 4,
    active: false,
    coordinates: {
      latitude: 28.6364551,
       longitude: 77.0968294,

    }, 

  },
  {
    title: 'lat: 28.6364551, log: 77.0968294',
    index: 5,
    active: false,
    coordinates: {
      latitude: 28.6109522, 
      longitude: 77.1131802,

    },   
  }, 
 ]
};

componentDidMount = () => { 
this.animate()
};
// shouldComponentUpdate(){
//   return false
// }

async animate() {
 const {markers} = this.state;
 for(var i in markers){
  if(markers[i]['active'] == true){  
    const newItems = [...this.state.markers];
    newItems[i].active = !newItems[i].active;
    this.setState({marker: newItems})   
  }

}

if(markers[this.state.startTransition].index==
this.state.startTransition){
  if(markers[this.state.startTransition].active==false){
    const newItems = [...this.state.markers];
      let index = this.state.startTransition

      newItems[index].active = !newItems[index].active;

      this.setState({ markers:JSON.parse(JSON.stringify(newItems)) 
   });    
  }

 }

if(this.state.startTransition < this.state.endTransition){

  let currentTransition = this.state.startTransition + 1;
  this.setState({startTransition: currentTransition});

} else {
  this.setState({startTransition: 0});
}
let x = setTimeout(()=>{

  this.animate()
 }, 1000);
}


render() {
const {currentLatitude} =  this.state;
const {currentLongitude} = this.state;
const Latitude = parseFloat(currentLatitude)
const Longitude = parseFloat(currentLongitude)

return (
  <View style={styles.container}>
  <MapView
    style={styles.map}
     region={{
      latitude: 28.6095206,
      longitude: 77.1011353,
      latitudeDelta: 0.155,
      longitudeDelta: 0.151,
    }}
  >

    {this.state.markers.map(marker => (

 <MapView.Marker.Animated 
  coordinate={marker.coordinates}
  title={marker.title}
  key = {marker.index}
  pinColor={marker.active==true?'blue':'red'}
/>
))
}


     <Polyline
coordinates={[
{ latitude: 28.6095206, longitude: 77.1011353 },
{ latitude: 28.6151759, longitude: 77.0842171},
{ latitude: 28.6242541, longitude: 77.0652866},
{ latitude: 28.6328224, longitude: 77.0863152},
{ latitude: 28.6364551, longitude: 77.0968294},
{ latitude: 28.6109522, longitude: 77.1131802 } ]}
    strokeColor="#000" 
    strokeColors={[
        '#7F0000',
        '#00000000', 
        '#B24112',
        '#E5845C',
        '#238C23',
        '#7F0000'
    ]}
    strokeWidth={6}
  /> 
      </MapView>
     </View>
    );
   }
  }

  const styles = StyleSheet.create({
   container: {
    ...StyleSheet.absoluteFillObject,
     justifyContent: 'flex-end',
      alignItems: 'center',
    },
   map: {
    flex: 1,
     ...StyleSheet.absoluteFillObject,
   },
 });

Answer 1

将标记键属性更改为其他内容

<Marker
  pinColor={marker.active==true?'blue':'red'}
  key={`${marker.index}-${marker.active ? 'active' : 'inactive'}`}
  // ... other props ...
/>

还要选中此link

React-native-map标记颜色未更改

1 个答案: