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

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

在我的

EventCreator.js

屏幕中有

SetLocationMap.js

组件，用户将从该组件中设置他们想要的位置，我想将其传递或显示在我的

EventMap.js

屏幕上，在该屏幕上，React原生映射（也有一个映射，但我的主映射）使用标记

在我的React Redux中，当用户正在设置数据或将从

EventCreator.js

屏幕选择位置时，我已经提交了数据或

位置

状态（纬度和经度）。因此，基本上，我已经获得了位置的状态（我通过在React本机调试器上检查来证明它）

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

我将向您展示我的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))
};
};

我的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

（主地图）-这是我想要显示或传递带有标记的

位置

状态的地方

提醒：我已经尝试显示多个标记，但没有React Redux，只是一个提醒，因为您将看到一些标记代码。

组件didmount

用于每个标记（5）的动画

this.state={
焦点位置：{
纬度：0，
经度:0,，
//latitudeDelta:0.04864195044303443，
//纵向德尔塔：0.040142817690068，
纬度德尔塔：0.01，
longitudeDelta:Dimensions.get（'window'）。宽度/尺寸。get（'window'）。高度*0.01
},
所选位置：false，
标记位置：{
纬度：0，
经度：0
},
标记：[
{
协调：{
纬度：37.42484589323653，
经度：-122.08271104842426
},
},
{
协调：{
纬度：37.42019338901534，
经度：-122.08207536488771
},
},
{
协调：{
纬度：37.4219108525511，
经度：-122.08126466721296
},
},
{
协调：{
纬度：37.42190153308783，
经度：-122.08728086203337
},
},
{
协调：{
纬度：37.419681603891306，
经度：-122.08521489053966
},
}
],
}
}
componentDidMount（）{
//我们应该检测滚动何时停止，然后设置动画
//我们应该在这里消除事件侦听器的影响
this.animation.addListener（（{value}）=>{
让index=Math.floor（值/CARD_WIDTH+0.3）；//在距离下一个项目着陆30%的地方设置动画
如果（索引>=this.state.markers.length）{
索引=this.state.markers.length-1；
}
如果（索引）{
如果（this.index！==索引）{
这个指数=指数；
const{coordinate}=this.state.markers[index]；
this.map.animateToRegion(
{
坐标
latitudeDelta:this.state.focusedLocation.latitudeDelta，
longitudeDelta:this.state.focusedLocation.longitudeDelta，
},
350
);
}
}, 10);
});
}
返回(
{/*  */}
this.map=ref}//用于设置贴图移动动画
>
{userMarker}
{this.state.markers.map（（marker，index）=>{
常量比例样式={
转换：[
{
比例：插值[索引]。比例，
},
],
};
常数opacityStyle={
不透明度：插值[索引]。不透明度，
};
返回(
);
})}
常量mapStateToProps=状态=>{
返回{
事件：state.events.events
};
};
导出默认连接（MapStateTops）（EventMap）；

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

 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);