1 Phản ứng lại Bản đồ gốc - Chế độ xem Thẻ không hiển thị

câu hỏi được tạo ra tại Wed, May 8, 2019 12:00 AM

Vấn đề là Chế độ xem thẻ không hiển thị. Tôi đã thử áp dụng nó với indexposition nhưng không có gì hoạt động. Tôi cần quan điểm của người khác. Cảm ơn bạn.

Đây là những gì tôi muốn đạt được:

 nhập mô tả hình ảnh tại đây

Đây là mã của tôi:

return(
  <View style={styles.container}>
    {/* <StatusBar backgroundColor={'transparent'} translucent={true}/> */}
    <MapView
      style={styles.map}
      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={true}
      scrollEventThrottle={1}
      pagingEnabled={true} 
      showsHorizontalScrollIndicator={false}
      snapToInterval={CARD_WIDTH}
      onScroll={Animated.event(
        [
          {
            nativeEvent: {
              contentOffset: {
                x: this.animation,
              },
            },
          },
        ],
        { useNativeDriver: true }
      )}
      style={styles.scrollView}
      contentContainerStyle={styles.endPadding}
    >
      {this.state.markers.map((marker, 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>
      })}
    </Animated.ScrollView>
    {/* <TouchableOpacity onPress={this.getLocationHandler} style={styles.iconContainer}>
      <Icon name="md-locate" size={30} color="blue"/>
    </TouchableOpacity> */}
  </View>
);

Dành cho StyleSheet:

const styles = StyleSheet.create({
 container: {
  alignItems: 'center',
 },
 map: {
  height: '100%',
  width: '100%'
 },
 iconContainer: {
  position: 'absolute',
  top: 60,
  right: 15,
  zIndex: 1
 },
//--- Style for Marker -----//
markerWrap: {
  alignItems: 'center',
  justifyContent: 'center',
},
marker: {
  width: 8,
  height: 8,
  borderRadius: 4,
  backgroundColor: "rgba(130,4,150, 0.9)",
},
ring: {
  width: 24,
  height: 24,
  borderRadius: 12,
  backgroundColor: "rgba(130,4,150, 0.3)",
  position: "absolute",
  borderWidth: 1,
  borderColor: "rgba(130,4,150, 0.5)",
},
scrollView: {
  position: "absolute",
  bottom: 30,
  left: 0,
  right: 0,
  paddingVertical: 10,
},
endPadding: {
  paddingRight: width - CARD_WIDTH,
},
card: {
  padding: 10,
  elevation: 2,
  backgroundColor: "#FFF",
  marginHorizontal: 10,
  shadowColor: "#000",
  shadowRadius: 5,
  shadowOpacity: 0.3,
  shadowOffset: { x: 2, y: -2 },
  height: CARD_HEIGHT,
  width: CARD_WIDTH,
  overflow: "hidden",
},
cardImage: {
  flex: 3,
  width: "100%",
  height: "100%",
  alignSelf: "center",
},
textContent: {
  flex: 1,
},
cardTitle: {
  fontSize: 12,
  marginTop: 5,
  fontWeight: "bold",
},
cardDescription: {
  fontSize: 12,
  color: "#444",
}
})
    
0
1 Câu trả lời                              1                         

Sử dụng các kiểu này:

container: {
    flex: 1
},
map: {
    flex: 1,
    ...StyleSheet.absoluteFillObject,
    top: 0, left: 0, right: 0, bottom: -25
},
scrollView: { // Or for a simple View, Or Card
    // ...
    position: 'absolute',
    bottom: 0,
    zIndex: 100,
}
    
0
2019-05-08 16: 41: 02Z
  1. Đã thử nó, nhưng không hoạt động. Có ý tưởng nào không?
    2019-05-09 01: 23: 22Z
  2. @ LizaCindaOmbyaw bạn có cách giải quyết nào không?
    2019-05-11 18: 31: 34Z
nguồn đặt đây