Question

我的代码库如下

 componentDidMount() {
        //firebase.firestore().collection('locations').doc('test').set({ test: 'test' })

        Geolocation.getCurrentPosition(
            (position) => {
                if (position) {

                    this.setState({
                      region: {
                        latitude: Number(position.coords.latitude),
                        longitude: Number(position.coords.longitude),
                        latitudeDelta: 0.003,
                        longitudeDelta: 0.003,
                      },
                    });
                  }
                  alert(JSON.stringify(this.state.region))
            },
            (error) => alert(JSON.stringify(error)),
            { enableHighAccuracy: true, timeout: 20000, maximumAge: 1000, distanceFilter: 100 }
        );
        this.unsubscribe = this.locationRef.onSnapshot(this.getCollectionData);
       // firebase.firestore().collection("locations").get().then(QuerySnapshot => {  });
    }

和地图

  render() {
        return (<View style={{
            flex: 1,
            flexDirection: 'column',
          }}>
            <HeaderNavigationBar {...this.props} />
            <MapView showsUserLocation={true}
                // ref={map => this.map = map}
                initialRegion={this.state.region}
                style={styles.container}
            >
                {this.state.AllLocations.map((marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.locations.coords}
                        title={marker.Title}
                    />
                ))}
            </MapView>
          </View>);

    }

componentDidMount正确更新了状态，但是地图未显示正确的位置，而是按照在构造中设置的方式进行显示

constructor(props) {
        super(props);
        this.locationRef = firebase.firestore().collection('locations');
        this.unsubscribe = null;
        this.state = {
            isLoading: true,
            AllLocations: [],
            region: {
                latitude: 0,
                longitude: 0,
                latitudeDelta: 0.003,
                longitudeDelta: 0.003,
            }
        };
    }

请帮助

谢谢

Answer 1

initialRegion用于地图的初始渲染。在您的情况下，您将在地图渲染后获得用户位置，这就是其未更新的原因。

要解决这个问题，有两种方法。

1：使用加载状态，直到获得使用位置为止，并在获得位置之前阻止地图渲染。

2：使用region，例如region = {this.state.region}。

<MapView showsUserLocation={true}
                // ref={map => this.map = map}
                initialRegion={this.state.region}
                region={this.state.region}
                style={styles.container}
            >
                {this.state.AllLocations.map((marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.locations.coords}
                        title={marker.Title}
                    />
                ))}
            </MapView>

两者都能起作用，这取决于您的用例。

Answer 2

尝试

{this.state.region ? (<MapView


                    style={[styles.map]}
                    initialRegion={this.state.region}
                    region={this.state.region}


                    provider={PROVIDER_GOOGLE}


                >


                    {this.state.AllLocations.map((marker, index) => (
                    <MapView.Marker key={index}
                        coordinate={marker.locations.coords}
                        title={marker.Title}
                    />
                ))}
                </MapView>) : (
                        <MapView
                            loadingEnabled={true}
                            style={styles.map}
                            showsMyLocationButton={true}
                            provider={PROVIDER_GOOGLE}
                            style={[styles.map]}
                        >
                        </MapView>
                    )
                }

在构造函数中设置region: null即可使用

反应本地初始区域不更新状态

2 个答案: