Placing a component on MapView in react native
我试图在地图上放置一个位置图标,有时在重新加载后,该图标会离开应该包裹的容器。以下是我所指的图像,任何人都可以帮忙。铅>
有时它显示了这个
其他时间它可以正确对齐
下面是我的代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | <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, } |
});
从MapView容器中删除" LocationButton",然后添加主容器
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <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> |