Question

问题是卡视图未显示。我尝试将其与index和position一起应用，但没有任何效果。我需要别人的看法。谢谢。

这是我想要实现的：

这是我的代码：

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

对于样式表：

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",
}
})

Answer 1

使用以下样式：

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,
}

反应本地地图-卡视图未显示

1 个答案: