在 MapView 上放置一个组件以响应本机

Question

我想在地图上放置一个位置图标，有时在重新加载后，图标会离开它应该被包裹的容器。下面是我所指的图像，任何人都可以帮助解决这个问题.

有时会显示这个

其他时候它正确对齐

下面是我的代码

              <MapView
                style={map}
                region={region}
                showsUserLocation
                loadingEnabled
                showsCompass
                showsTraffic
                onRegionChangeComplete={this.onRegionChangeComplete}
                onRegionChange={this.onRegionChange}
                ref={el => (this.mapView = el)}
              >
              <Fragment>
                <LocationButton
                  onPress={this.refocus}
                  style={locationFocus}
                />
              </Fragment>
              </MapView>
            )}
            </View>
        );
      }
    }

    const styles = StyleSheet.create({
      container: {
        flex: 1,
      },
      map: {
        position: 'absolute',
        flex: 1,
        width: '100%',
        height: '100%',
      },
      locationFocus: {
        position: 'absolute',
        bottom: 200,
        right: 20,
      }

});

Answer 1

从 MapView 容器中删除 "LocationButton" 并添加到主容器中

<View style={{flex:1}}>
      <MapView
          style={map}
          region={region}
          showsUserLocation
          loadingEnabled
          showsCompass
          showsTraffic
          onRegionChangeComplete={this.onRegionChangeComplete}
          onRegionChange={this.onRegionChange}
          ref={el => (this.mapView = el)}
        >
    </MapView>
    <Fragment>
      <LocationButton
        onPress={this.refocus}
        style={locationFocus}
      />
    </Fragment>
</View>

在 MapView 上放置一个组件以响应本机

Placing a component on MapView in react native

reactjs

react-native

expo

react-native-maps