0

我已经在轮播视图中实现了 react-native-maps 以显示 2 层建筑的平面图，并且一切正常。现在，当我尝试调用一个函数以重新居中平面图图像时，第一张幻灯片没有响应该功能，而第二张幻灯片正常工作且符合预期。

if(Platform.OS === 'ios'){

console.log("mapview" ,mapView);

返回 （

<View style={styles.container} key={index}>

<MapView
            style={{
             height:Dimensions.get('window').height,
             width:Dimensions.get('window').width


         }}
         ref={mapView}
            provider={PROVIDER_GOOGLE}
            mapType= "none"
            minZoomLevel = {16}
            maxZoomLevel = {18}

            initialRegion={{
              latitude:mapcenterlat,
              latitudeDelta: 0.009,
              longitude:mapcenterlng,
              longitudeDelta:0.0315,
            }}>


        <Overlay
        bounds={[
          [coord_topleft_lat, coord_topleft_lng],
          [coord_bottomright_lat, coord_bottomright_lng]
        ]}

    image= {item.floorplan_image}

   />

   {item.locations.map((polygon,index) =>
             (<MapView.Polygon
               key={polygon.index}
               coordinates={polygon.coordinates}
               fillColor={polygon.fillcolor}
               fillOpacity={2}
               strokeColor={polygon.strokecolor}
               tappable = {true}
               strokeOpacity= {1}
               strokeWeight={1}
               onPress={() => createBooking(polygon.id,polygon.name,polygon.is_reserved,polygon.assets)}
             />),
           )}



      </MapView>

      <View style={{position: 'absolute',flexDirection:'row',padding:70,marginVertical:-50}}>


      <Text style={{fontWeight: 'bold', fontSize: 20}}>
        {item.floor_name}
      </Text>

      <Pagination
      dotsLength={floorlist.length}
      activeDotIndex={activeSlide}
      carouselRef={isCarousel}

      dotStyle={{
        width: 10,
         height: 10,
      borderRadius: 5,
      marginHorizontal: 0,
      backgroundColor: 'rgba(0, 0, 0, 0.92)'
      }}
      inactiveDotOpacity={0.4}
      inactiveDotScale={0.6}
      tappableDots={true}
      activeOpacity= {1}
      />


      </View>
      <View style={{position: 'absolute',flexDirection:'column',top:hp('33%'),marginHorizontal:10}}>

        <TouchableOpacity onPress={() => _carousel.snapToPrev()}><AntDesign name="left" size={24} color="black" /></TouchableOpacity>

<TouchableOpacity onPress={() => _carousel.snapToNext()}><AntDesign name="right" size={24} color="black" /></TouchableOpacity>

) }

4

0 回答 0