时间戳

首页 > 解决方案 > 如何修复包裹在 TouchableOpacity 中的 Icon 的奇怪行为？

react-native - 如何修复包裹在 TouchableOpacity 中的 Icon 的奇怪行为？

问题描述

我有一个 MapView，里面有一个固定的市场供用户拖动地图并设置当前位置，一个保存更改的按钮和一个包裹在可触摸不透明度中以设置当前位置的图标。我的问题是有时包装 TouchableOpacity 的 Icon 出现在右上角。

gif

地图视图的代码

        <Modal
          animationType="slide"
          transparent={false}
          visible={modalVisible}
          onRequestClose={() => { }}
        >
          <MapView
            style={styles.map}
            onRegionChangeComplete={this.onRegionChange}
            initialRegion={region || initialCoordinates}
            ref={(el) => { this.mapViewModal = el }}
          >
            <View pointerEvents="none" style={[styles.markerFixed, { marginBottom: 52 }]}>
              <Ionicons style={styles.marker} pointerEvents="none" name="ios-pin" size={72} />
            </View>
            <TouchableOpacity onPress={this.setMapCurrentLocation} style={styles.arrowWrapper}>
              <FontAwesome name="location-arrow" style={styles.locationArrow} size={42} />
            </TouchableOpacity>
          </MapView>
          <View style={styles.mapButtonWrapper}>
            <RkButton
              style={styles.mapButton}
              onPress={this.handleAdjustClick}
            >
              {i18n.t('Adjust')}
            </RkButton>
          </View>
        </Modal>

款式：

 arrowWrapper: {
    position: 'absolute',
    backgroundColor: 'white',
    borderRadius: 100,
    textAlign: 'center',
    width: 50,
    height: 50,
    padding: 5,
    right: 10,
    bottom: 75,
    justifyContent: 'flex-end',
    alignItems: 'flex-end'
  },
  locationArrow: {
    color: primaryColor,
    alignSelf: 'center'
  },

有人知道如何解决这个问题吗？

标签： react-native

解决方案

通过将 TouchableOpacity 移出 MapView 并包装到 View 中进行修复：

  <Modal
      animationType="slide"
      transparent={false}
      visible={modalVisible}
      onRequestClose={() => { }}
    >
      <MapView
        style={styles.map}
        onRegionChangeComplete={this.onRegionChange}
        initialRegion={region || initialCoordinates}
        ref={(el) => { this.mapViewModal = el }}
      >
        <View pointerEvents="none" style={[styles.markerFixed, { marginBottom: 52 }]}>
          <Ionicons style={styles.marker} pointerEvents="none" name="ios-pin" size={72} />
        </View>
      </MapView>
      <View style={styles.arrowWrapper}>
        <TouchableOpacity onPress={this.setMapCurrentLocation}>
          <FontAwesome name="location-arrow" style={styles.locationArrow} size={42} />
        </TouchableOpacity>
      </View>
      <View style={styles.mapButtonWrapper}>
        <RkButton
          style={styles.mapButton}
          onPress={this.handleAdjustClick}
        >
          {i18n.t('Adjust')}
        </RkButton>
      </View>
    </Modal>

推荐阅读