Реагировать на исходный начальный регион, не обновляя его по состоянию - PullRequest
Новая
       28

Реагировать на исходный начальный регион, не обновляя его по состоянию

0 голосов
/ 15 апреля 2019

у меня ниже кодовая база 

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

Пожалуйста, помогите

спасибо

Ответы [ 2 ]

0 голосов
/ 15 апреля 2019

Попробуйте это 

{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 в конструкторе это будет работать

0 голосов
/ 15 апреля 2019

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>

Оба будут работать, это зависит от вашего варианта использования.

...