反应原生初始区域不随状态更新

Posted 2023-02-23

【中文标题】反应原生初始区域不随状态更新

【英文标题】：React native initial region not updating with state

【发布时间】：2019-04-15 12:02:12

【问题描述】：

我有以下代码库

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

请帮忙

谢谢

【参考方案1】：

试试这个

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】：

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>

两者都可以，这取决于您的用例。

【讨论】：

我加了region=this.state.region，还是没有效果

问题可能与位置有关，请确保您正在获取地理定位 api 的位置，它在许多手机上都无法正常工作，您可以尝试加载状态直到获得位置。

我通过发出警报检查了正确的地理位置

是的，添加区域属性不起作用。位置被正确捕获。有人找到这个问题的答案了吗？