React Native - добавление нескольких маркеров с помощью React Redux

Question

Моя цель - добавить несколько маркеров с помощью React Redux.

На моем EventCreator.js экране есть SetLocationMap.js Компонент - это место, где моя Карта из этого компонента, пользователь будет указывать место, где он хочет, и я хочу передать его или отобразить на моем EventMap.js экране, где реагирует Родная карта (также есть карта, но моя главная карта) с помощью маркера.

В моем React Redux я уже отправлял данные или состояние location (Широта и Долгота), когда пользователь настраивает его или выберет местоположение на экране EventCreator.js. Итак, в основном, я уже получил состояние местоположения (я проверяю это, проверяя его на своем React Native Debugger).

Проблема в том, что я не знаю, как отобразить местоположение с помощью маркера в моей 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: (Если запутались, спросите мои коды)

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

... \ действия \ event.js:

export const addEvent = (eventName, eventDescription, location) => {
  return {
    type: ADD_EVENT,
    eventName: eventName,
    eventDescription: eventDescription,
    location: location
  };
};

Тогда моя EventMap.js (главная карта) - это то место, где я хочу отобразить или передать состояние location с помощью маркера.

Напоминание: я уже пытался отобразить несколько маркеров, но без 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);