在React Native中将组件放置在MapView上

Question

我试图在地图上放置一个位置图标，有时重新加载后，该图标离开了应该包裹的容器。以下是我所指的图像，任何人都可以帮忙。 / p>

有时它显示了这个

其他时间它可以正确对齐

下面是我的代码

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