React Native-在MapView的Animated ScrollView中添加卡片和标记

Question

我要实现的是，当用户键入所有数据（如位置，名称，描述）时，它将在地图上创建标记和卡片。我无法弄清楚实现该目标的目标。我需要专家的答复。谢谢！

这是我的代码：

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
      },
      title: "Palawan",
      description: "This is the first best place in the world.",
      image: Images[0]
    },
    {
      coordinate: {
        latitude: 37.42019338901534,
        longitude: -122.08207536488771
      },
      title: "Boracay",
      description: "This is the second best place in the world.",
      image: Images[1]
    },
    {
      coordinate: {
        latitude: 37.4219108525511,
        longitude: -122.08126466721296
      },
      title: "Tagaytay",
      description: "This is the third best place in the world.",
      image: Images[2]
    },
    {
      coordinate: {
        latitude: 37.42190153308783,
        longitude: -122.08728086203337
      },
      title: "Baler",
      description: "This is the fourth best place in the world.",
      image: Images[3]
    },
    {
      coordinate: {
        latitude: 37.419681603891306,
        longitude: -122.08521489053966
      },
      title: "Bohol",
      description: "This is the fifth best place in the world.",
      image: Picture
    }
  ],
}

render() {
//For the UserMarker
let userMarker = null;
if(this.state.locationChosen) { 
  userMarker = <MapView.Marker coordinate={this.state.markerPosition} />
}

//For the Scroll View Card
const interpolations = this.state.markers.map((marker, index) => {
  const inputRange = [
    (index - 1) * CARD_WIDTH,
    index * CARD_WIDTH,
    ((index + 1) * CARD_WIDTH),
  ];
  const scale = this.animation.interpolate({
    inputRange,
    outputRange: [1, 2.5, 1],
    extrapolate: "clamp",
  });
  const opacity = this.animation.interpolate({
    inputRange,
    outputRange: [0.35, 1, 0.35],
    extrapolate: "clamp",
  });
  return { scale, opacity };
});

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>
        );
      })}
    </MapView>
    <Animated.ScrollView
      horizontal
      scrollEventThrottle={1}
      pagingEnabled={true}
      showsHorizontalScrollIndicator={false}
      snapToInterval={snapInterval}
      onScroll={Animated.event(
        [
          {
            nativeEvent: {
              contentOffset: {
                x: this.animation,
              },
            },
          },
        ],
        { useNativeDriver: true }
      )}
      style={styles.scrollView}
      contentContainerStyle={styles.endPadding}
    >
      {this.state.markers.map((marker, index) => (
        <TouchableOpacity onPress={this.navigateToEvent} key={index}>
          <View style={styles.card} key={index}>
            <Image
              source={marker.image}
              style={styles.cardImage}
              resizeMode="cover"
            />
            <View style={styles.textContent}>
              <Text numberOfLines={1} style={styles.cardtitle}>{marker.title}</Text>
              <Text numberOfLines={1} style={styles.cardDescription}>
                {marker.description}
              </Text>
            </View>
          </View>
        </TouchableOpacity>
      ))}
    </Animated.ScrollView>
    <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
      <Icon name="md-locate" size={30} color="blue"/>
    </TouchableOpacity>
  </View>
);
}

这是图像。紫色标记以其特定的纬度和经度连接到卡片。