如何修复包裹在 TouchableOpacity 中的 Icon 的奇怪行为？答案

【问题标题】：How to fix a strange behavior of an Icon wrapped into TouchableOpacity?如何修复包裹在 TouchableOpacity 中的 Icon 的奇怪行为？
【发布时间】：2019-04-10 12:32:01
【问题描述】：

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

地图视图的代码

        <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

【解决方案1】：

通过将 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>

【讨论】：