javascript - React Native - 使用 React Redux 添加多个标记
问题描述
我的目标是,我想使用 React Redux 添加多个标记。
在我的EventCreator.js
屏幕中,有一个SetLocationMap.js
组件是我从这个组件中的地图,用户将设置他们想要的位置,我想将它传递或显示在我的EventMap.js
屏幕上 React Native Map 的位置(也有一个地图,但我的主地图) 使用标记。
location
在我的 React Redux 中,当用户设置或从EventCreator.js
Screen 中选择位置时,我已经提交了数据或状态(纬度和经度)。所以基本上,我已经完成了获取位置的状态(我通过在我的 React Native 调试器上检查它来证明它)。
问题是我不知道如何在 EventMap(我的主地图)中使用标记显示位置。
我将向您展示我的 React Redux 和我的组件的代码,并解释它们的用途。我将只显示重要的代码。
EventCreator.js
屏幕 - 在这个组件中,有我的SetLocationMap.js
.
placeAddedHandler = () => {
this.props.onAddEvent(
this.state.controls.eventName.value,
this.state.controls.eventDescription.value,
this.state.controls.location.value
);
};
locationPickedHandler = location => {
this.setState(prevState => {
return {
controls: {
...prevState.controls,
location: {
value: location
}
}
}
});
}
return(
<LinearGradient style={styles.linearGradient} colors={['#718792', '#1c313a', '#000a12']}>
<View style={{flex:1}}>
<EventInput
// onEventAdded={this.eventAddedHandler}
titleOnChangeText={this.eventNameChangedHandler}
descriptionOnChangeText={this.eventDescriptionChangedHandler}
titleEvent={this.state.controls.eventName}
descriptionEvent={this.state.controls.eventDescription}
/>
<SetLocationMap onLocationPick={this.locationPickedHandler}/>
</View>
<View style={styles.buttonContainer}>
<TouchableOpacity onPress={this.placeAddedHandler}>
<View style={styles.button}>
<Text style={{color: 'black', fontSize: 20, fontWeight: 'bold'}}>Add</Text>
</View>
</TouchableOpacity>
</View>
</LinearGradient>
);
const mapDispatchToProps = dispatch => {
return {
onAddEvent: (eventName, eventDescription, location) => dispatch(addEvent(eventName, eventDescription, location))
};
};
SetLocationMap.js
组件 - 这是我的地图所在的位置。
pickLocationHandler = (event) => {
const coords = event.nativeEvent.coordinate;
//For animation of map
this.map.animateToRegion({
...this.state.focusedLocation,
latitude: coords.latitude,
longitude: coords.longitude
});
this.setState(prevState => {
return {
focusedLocation: {
...prevState.focusedLocation,
latitude: coords.latitude,
longitude: coords.longitude
},
locationChosen: true
};
});
this.props.onLocationPick({
latitude: coords.latitude,
longitude: coords.longitude
});
};
return(
<View style={styles.container}>
<MapView
style={styles.map}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{marker}
</MapView>
</View>
);
我的 React Redux 代码:(如果感到困惑,请询问我的代码)
...\reducers\event.js:
const reducer = (state = initialState, action) => {
switch (action.type) {
case ADD_EVENT:
return {
...state,
events: state.events.concat({
key: `${Math.random()}`,
name: action.eventName,
description: action.eventDescription,
location: action.location,
image: {
uri: "https://c1.staticflickr.com/5/4096/4744241983_34023bf303_b.jpg"
}
})
};
...\actions\event.js:
export const addEvent = (eventName, eventDescription, location) => {
return {
type: ADD_EVENT,
eventName: eventName,
eventDescription: eventDescription,
location: location
};
};
然后,我的EventMap.js
(主地图)——这是我想location
用 Marker 显示或传递状态的地方。
提醒:我已经尝试过显示多个标记但没有 React Redux,只是提醒一下,因为您将使用一些标记代码。
componentDidMount
用于每个标记 (5) 的动画。
this.state = {
focusedLocation: {
latitude: 0,
longitude: 0,
// latitudeDelta: 0.04864195044303443,
// longitudeDelta: 0.040142817690068,
latitudeDelta: 0.01,
longitudeDelta: Dimensions.get('window').width / Dimensions.get('window').height * 0.01
},
locationChosen: false,
markerPosition: {
latitude: 0,
longitude: 0
},
markers: [
{
coordinate: {
latitude: 37.42484589323653,
longitude: -122.08271104842426
},
},
{
coordinate: {
latitude: 37.42019338901534,
longitude: -122.08207536488771
},
},
{
coordinate: {
latitude: 37.4219108525511,
longitude: -122.08126466721296
},
},
{
coordinate: {
latitude: 37.42190153308783,
longitude: -122.08728086203337
},
},
{
coordinate: {
latitude: 37.419681603891306,
longitude: -122.08521489053966
},
}
],
}
}
componentDidMount() {
// We should detect when scrolling has stopped then animate
// We should just debounce the event listener here
this.animation.addListener(({ value }) => {
let index = Math.floor(value / CARD_WIDTH + 0.3); // animate 30% away from landing on the next item
if (index >= this.state.markers.length) {
index = this.state.markers.length - 1;
}
if (index <= 0) {
index = 0;
}
clearTimeout(this.regionTimeout);
this.regionTimeout = setTimeout(() => {
if (this.index !== index) {
this.index = index;
const { coordinate } = this.state.markers[index];
this.map.animateToRegion(
{
...coordinate,
latitudeDelta: this.state.focusedLocation.latitudeDelta,
longitudeDelta: this.state.focusedLocation.longitudeDelta,
},
350
);
}
}, 10);
});
}
return(
<View style={styles.container}>
{/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
<MapView
style={styles.container}
initialRegion={this.state.focusedLocation}
onPress={this.pickLocationHandler}
showsUserLocation={true}
ref={ref => this.map = ref} //For animating map movement
>
{userMarker}
{this.state.markers.map((marker, index) => {
const scaleStyle = {
transform: [
{
scale: interpolations[index].scale,
},
],
};
const opacityStyle = {
opacity: interpolations[index].opacity,
};
return (
<MapView.Marker key={index} coordinate={marker.coordinate}>
<Animated.View style={[styles.markerWrap, opacityStyle]}>
<Animated.View style={[styles.ring, scaleStyle]} />
<View style={styles.marker} />
</Animated.View>
</MapView.Marker>
);
})}
const mapStateToProps = state => {
return {
events: state.events.events
};
};
export default connect(mapStateToProps)(EventMap);