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

Question

我在我的应用程序中使用了响应原生地图 Airbnb 的位置按钮有一些问题， 当我第一次打开应用程序并呈现地图时，按钮消失了，但是当我关闭应用程序 * 仍在后台 * 并重新打开它们时，按钮看起来就像这个 GIF 一样，

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

注意

我在 react native maps 的主仓库中看到了所有相同的问题 但它不起作用！

和其他Q，

应用程序第一次没有要求我打开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;

Answer 1

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

有两种方法可以解决这个问题：

1. 制作自定义按钮，然后使用 animateToRegion onPress 转到用户位置。
2. 重新打开应用后看到按钮的原因是重新绘制/重新渲染（解决了这个问题）。所以简而言之，如果你导致重新渲染，按钮就会出现。

sn-p 得到这个想法

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

 />