React Native Map:将 TouchableOpacity 添加到标记

问题描述

我正在使用 React Native Map。我想将 TouchableOpacity 添加到我的自定义标记以向用户提供触摸反馈。但是 TouchableOpacity 不适用于 iOS 和 Android。 这是我的代码

 <MapView
   ref={mapRef}
   style={styles.map}
   provider={PROVIDER_GOOGLE}
   showsUserLocation={true}
   initialRegion={positionCoord}
   moveOnMarkerPress={false}
   onRegionChangeComplete={ (reg) => {
     updateVisibleMarkers();
   }}
   zoomEnabled={true}
 >      
   { visibleMarkers.map( parking =>
      <Marker 
         key={`marker-${parking.id}`}
         coordinate={parking.coordinate}
         onPress={() => {setActiveParking(parking); setModalisVisible(true);}}
      >
       <TouchableOpacity>
         <View style={[styles.marker,styles.shadow]}>
            <Text style={styles.markerPrice}>${parking.price}</Text>
            <Text style={styles.markerStatus}>({parking.free}/{parking.spots})</Text>
         </View>
       </TouchableOpacity>
      </Marker>
  )}
 </MapView>

样式表:

export default styles = StyleSheet.create({
  map: {
    flex : 1,zIndex: -1
  },marker: {
    flexDirection: 'row',backgroundColor: '#FFFFFF',borderRadius: 24,paddingVertical: 12,paddingHorizontal: 24,borderWidth: 1,borderColor: '#FFFFFF',},markerPrice: { 
    color: '#D83C54',fontWeight: 'bold',markerStatus: { 
    color: '#7D818A'
  },shadow: {
    shadowColor: "#3D4448",shadowOffset: {
      width: 0,height: 6,shadowOpacity: 0.1,shadowRadius: 4,backgroundColor : 'white',elevation : 5
  }
});

任何人都可以帮助我找出为什么在我按下地图上的标记时 TouchableOpacity 不起作用?谢谢。

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)