javascript - 如何修复Android中的显示位置按钮-React Native Map？

我在应用程序中使用了对本机地图Airbnb的反应时，位置按钮出现了一些问题，
当我第一次打开应用程序并渲染地图时，该按钮消失了，但是当我关闭应用程序*仍在背景中*并重新打开它们时，该按钮看起来就像GIF一样，

链接：https://imgur.com/37HF6H5

注意


  我已经在React Native Map的主仓库中看到了所有相同的问题
  但它不起作用！


还有其他的Q

该应用程序并没有要求我第一次打开GPS，只有当我手动打开GPS时才可以工作
我有Android 8 *真实设备*

这是我的代码

import React, { Component } from 'react';
import MapView, { Marker } from 'react-native-maps';
import { View, Text, StyleSheet, Dimensions } from 'react-native';

let { width, height } = Dimensions.get('window');

const LATITUDE = 31.78825;
const LONGITUDE = 34.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = 0.0421;

class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
            error: null,
            width: width,
            marginBottom: 1,
            region: {
                latitude: LATITUDE,
                longitude: LONGITUDE,
                latitudeDelta: LATITUDE_DELTA,
                longitudeDelta: LONGITUDE_DELTA,
            }
        };

    }
    _findMe = async () => {


        this.watchID = await navigator.geolocation.watchPosition(
            ({ coords }) => {
                const { latitude, longitude } = coords
                this.setState({
                    region: {
                        latitude,
                        longitude,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }
                })
            });

        await navigator.geolocation.getCurrentPosition(
            (position) => {
                this.setState({
                    region: {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        latitudeDelta: LATITUDE_DELTA,
                        longitudeDelta: LONGITUDE_DELTA,
                    }
                })
            },
            (error) => console.log(JSON.stringify(error)),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000 }
        )
    }

    componentDidMount() {
        this._findMe();
    }
    componentWillUnmount() {
        navigator.geolocation.clearWatch(this.watchId);
    }
    render() {
        const { region } = this.state;
        return (
            <View style={styles.container}>
                <MapView
                    style={[styles.map, { width: this.state.width }]}
                    style={StyleSheet.absoluteFill}
                    onMapReady={() => console.log(this.state.region)}
                    showsUserLocation
                    followsUserLocation={true}
                    region={region}
                    showsMyLocationButton={true}
                    // style={StyleSheet.absoluteFill}
                    textStyle={{ color: '#bc8b00' }}
                    containerStyle={{ backgroundColor: 'white', borderColor: '#BC8B00' }}
                >
                    <Marker
                        coordinate={this.state.region}
                        title="Hello"
                        description="description"
                    />
                </MapView>
                {/* <Text>{this.state.region.latitude}</Text> */}
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        flexDirection: 'row',
        justifyContent: 'space-between',
        padding: 30,
        flex: 1,
        alignItems: 'center'
    },
    map: {
        position: 'absolute',
        zIndex: -1,
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
    },
});

export default Map;

最佳答案

我知道这是一个老问题，但我希望您在android平台上分享此bug的解决方案。

有两种解决方法：


制作自定义按钮，然后使用animateToRegion onPress转到用户位置。
原因是，重新打开应用程序后看到该按钮是由于重新绘制/渲染（解决了此问题）所致。简而言之，如果您导致重新渲染，则该按钮将出现。


摘录

constructor(props) {
   super(props);
   this.state = {
       bottomMargin: 1,
   };
 }
 <MapView
      showsUserLocation
      style={{
        marginBottom: this.state.bottomMargin,             // using state in styling
        ...StyleSheet.absoluteFillObject,
      }}
      region={this.state.region}
      onRegionChangeComplete={this.onRegionChange}
      onMapReady={() => this.setState({ bottomMargin: 0 })} // this will fire once onReady

 />