Question

我的目标是，我想使用React Redux添加多个标记。

在我的EventCreator.js屏幕上，有SetLocationMap.js个组件是我在该组件中的地图所在的位置，用户可以设置他们想要的位置，我想将其传递或显示在我的{{1 }}屏幕上使用Marker的React Native Map（也有一个Map，但是我的主Map）。

在我的React Redux中，当用户设置数据或从EventMap.js屏幕中选择位置时，我已经提交了数据或location状态（纬度和经度）。因此，基本上，我已经完成了获取位置状态的操作（通过在React Native Debugger上进行检查来证明这一点）。

问题是我不知道如何在EventMap（主地图）中使用标记显示位置。

我将向您展示我的React Redux和我的组件的代码，并说明它们的用途。我只显示重要的代码。

EventCreator.js屏幕-在此组件中，有我的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

我的React Redux代码：（如果感到困惑，请索要我的代码）

... \ reducers \ event.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>
);

... \ actions \ 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"
        }
      })
    };

然后，我的export const addEvent = (eventName, eventDescription, location) => { return { type: ADD_EVENT, eventName: eventName, eventDescription: eventDescription, location: location }; };（主地图）-这是我要在其中显示或传递带有标记的EventMap.js状态的地方。

提醒：我已经尝试显示多个标记，但是没有React Redux，只是提醒，因为您将需要一些标记代码。 location用于每个标记（5）的动画。

componentDidMount

React Native-使用React Redux添加多个标记

0 个答案: