Question

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

gif

MapView的代码

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

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

Answer 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>

如何解决包裹在TouchableOpacity中的图标的奇怪行为？

1 个答案: