将组件放在 MapView 上反应原生答案

【问题标题】：Placing a component on MapView in react native将组件放在 MapView 上反应原生
【发布时间】：2019-08-23 11:26:38
【问题描述】：

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

有时它会显示这个

其他时候它会正确对齐

下面是我的代码

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

});

【问题讨论】：

标签： reactjs react-native expo react-native-maps

【解决方案1】：

从 MapView Container 中移除“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>

【讨论】：