【发布时间】：2019-08-28 06:07:59
【问题描述】：
我想按顺序更改标记的颜色。首次渲染应用程序时，标记的所有颜色都应为红色。一秒钟后，第一个标记（no-1）颜色要变成蓝色。然后在一秒钟后第一个标记颜色变为以前的状态颜色。但第二个标记（no-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,
},
});
【问题讨论】：
标签： javascript reactjs google-maps react-native react-native-maps