React native React本机地图在发布时跳回区域

我在我的react native应用程序中使用react native maps-Mapview。在Android上，代码按预期工作，用户的位置用于确定区域。这将包括在This.state.lation和This.state.longtude中。只有在iOS上，我的问题是当我在地图上“滚动”时，它会在释放后跳回该区域。如果我把代码放在initialRegion上，我会在海里的某个地方结束，用户必须无限期地滚动。有人有这方面的经验吗

将代码设置为initialRoute后：

当前代码：

import React, {Component} from 'react';
import {StyleSheet, Text, View,ScrollView, SafeAreaView, ImageBackground, Button,TouchableOpacity, Alert, Image, Linking, ActivityIndicator} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { ListItem, ThemeConsumer } from 'react-native-elements'
import { Marker, PROVIDER_GOOGLE } from "react-native-maps";
//import { ClusterMap } from "react-native-cluster-map";
import MapView from "react-native-map-clustering";
import firebase from 'react-native-firebase';
import Geolocation from '@react-native-community/geolocation';
import LaunchNavigator from 'react-native-launch-navigator';

if(Platform.OS === "android") LaunchNavigator.setGoogleApiKey("API KEY");


class locationScreen extends Component {
    constructor(props){
        super(props);
        this.state = {

            cities : [ ],
            totalStores: 0,
            latitude:0,
            longitude: 0,
            nearestPlace: null,

        }
    }

    deg2Rad = (deg) => {
        return deg * Math.PI / 180;
      }

      pythagorasEquirectangular = (lat1, lon1, lat2, lon2) => {
        lat1 = this.deg2Rad(lat1);
        lat2 = this.deg2Rad(lat2);
        lon1 = this.deg2Rad(lon1);
        lon2 = this.deg2Rad(lon2);
        const R = 6371;
        const x = (lon2 - lon1) * Math.cos((lat1 + lat2) / 2);
        const y = (lat2 - lat1);
        const d = Math.sqrt(x * x + y * y) * R;
        return d;
      }
      nearestCity = (latitude, longitude) => {
       let mindif = 99999;
       let closest;


       for (let index = 0; index < this.state.cities.length; index++) {

        const dif = this.pythagorasEquirectangular(latitude, longitude, this.state.cities[index].lat, 
          this.state.cities[index].long);
          if (dif < mindif) {
          closest = index;
          mindif = dif;
          }

        }

        this.setState({
           nearestPlace: closest,

        })

        this.state.cities.forEach(i =>{
            if( i.name == this.state.cities[this.state.nearestPlace].name) i.nearest = 1 ;
          })

          this.setState({
            cities: this.state.cities,
          })

       // this.nearestPlace = closest
       // return cities= closest;
      }
    navigateTo = (item) => {
        console.log(item.street);
      LaunchNavigator.navigate(item.street + "," + item.zip+ ","+ item.city)
        .then(() => console.log("Launched navigator"))
        .catch((err) => console.error("Error launching navigator: "+err));
    }

    setCurrentDirections = () =>{

        Geolocation.getCurrentPosition(position => {
          this.setState({
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            desLat: position.coords.latitude,
            desLong: position.coords.longitude,
            error: null,
          });
          console.log("reached function");
          console.log("latitude: "  + this.state.latitude);
          console.log("Longtitude: "  + this.state.longitude);
        })

      }

    setNearestonClick= (clickId) =>{

        this.state.cities.forEach(i =>{
            if( i.name == clickId) i.nearest = 1 ;
          })

          this.setState({
            cities: this.state.cities,
          })
    }

    onItemClickHandler= (url)=>{
        Linking.openURL(url)
    }

   /* PressedLocation = (data) =>{
        console.log('location:' + data.lat + 'long ' +data.long );
        this.setState({
            latitude: data.lat,
            longitude: data.long,
            error: null,
          });

    }
*/

        markerCliked = (id) =>{
            console.log("id is: " + id);
        }

    latitude= 0;
    longitude= 0;
    componentDidMount(){
        this.setCurrentDirections();

        let ref = firebase.database().ref('stores');
        ref.on('value' , snapshot =>{
            var state = snapshot.val();

            this.setState({
                cities: state,
                totalStores: state.length,
            })

            this.nearestCity(this.state.latitude, this.state.longitude);
        })
    }

    render(){
        const { cities } = this.state;
        return(

            <ScrollView style={styles.scorllVert}>
                <SafeAreaView style={styles.container}>
                    <View style={styles.headerLeft}> 
                        <TouchableOpacity style={styles.menubar} onPress={this.props.navigation.openDrawer}>
                            <Icon name="bars" size={24}/>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.headerCenter}> 
                    <Image source={require('./assets/images/all/logo-snackpoint.png')} style={styles.logoSnackpoint} />
                    </View>
                    <View style={styles.headerRight}> 
                        <TouchableOpacity style={styles.userIcon}>
                            <Icon name="user-circle" size={24} onPress={this.props.navigation.openDrawer}/>
                        </TouchableOpacity>
                    </View>
                </SafeAreaView>

                <View style={styles.headerStores}> 
                        <Text  style={styles.headerStoresText}>Aantal vestigingen: {this.state.totalStores}</Text>
                    </View>
                <View style={styles.containerContent}>


                    <View style={styles.page}>
                    <View style={styles.containerMap}>
                    <MapView
                    showsUserLocation={true}

                            style={{ flex: 1 }}
                            onClusterPress={() => this.markerCliked()}
                            region={{
                                latitude: this.state.latitude,
                                longitude: this.state.longitude,
                                latitudeDelta: 0.015,
                                longitudeDelta: 0.0121
                            }}
                            >
                        {
                                    this.state.cities.map(marker => (
                                        <Marker key={marker.name}  coordinate={{latitude: marker.lat, longitude: marker.long}} onPress={() => this.setNearestonClick(marker.name)}/>
                                    ))

                        }

                    </MapView>
                    </View>
                    </View>

                <View style={styles.stores}>

                {
                    this.state.cities.sort(function(a, b) {
                        if(a.nearest) return -1;
                        if(b.nearest) return 1;
                        if(a.name.toLowerCase() < b.name.toLowerCase()) return -1;
                        if(a.name.toLowerCase() > b.name.toLowerCase()) return 1;
                        return 0;
                       }).map((marker, i) => (
                    <TouchableOpacity onPress={() => this.navigateTo(marker)} >
                    <View style={styles.store}> 
                        <View style={styles.leftcolumn}> 
                            <Text style={styles.storeTitle}>{marker.name}</Text>
                            <Text>{marker.street}</Text>
                            <Text>{marker.zip}, {marker.city}</Text>
                            <Text>Telefoon: {marker.phone}</Text>
                        </View>
                        <View style={styles.midcolumn}> 
                            <Text>Ma:</Text>
                            <Text>Di:</Text>
                            <Text>Wo:</Text>
                            <Text>Do:</Text>
                            <Text>Vr:</Text>
                            <Text>Za:</Text>
                            <Text>Zo:</Text>
                        </View> 
                        <View style={styles.rightcolumn}> 
                            <Text>{marker.monday}</Text>
                            <Text>{marker.tuesday}</Text>
                            <Text>{marker.wednesday}</Text>
                            <Text>{marker.thursday}</Text>
                            <Text>{marker.friday}</Text>
                            <Text>{marker.saturday}</Text>
                            <Text>{marker.sunday}</Text>
                        </View> 

                    </View>
                    <View style={{borderBottomColor: '#C8C8C8',borderBottomWidth: 1,}}/>
                    </TouchableOpacity>

                    ))
                }
                </View>




                </View>


            </ScrollView>

        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        flexDirection: 'row',
      flexWrap: 'wrap',
      alignItems: 'flex-start',
        marginBottom: 13
    },
    text:{
        color: "#161924",
        fontSize: 20,
        fontWeight: "500",
    },userIcon:{
        paddingTop: 22,
        paddingRight: 0,
        alignItems: 'flex-end',
    },
    logoSnackpoint:{
        width: 180,
        height: 52,
        marginTop: 12,
    },
    headerLeft:{
        width: '33%',
    },
    headerCenter:{
        width: '30%',
        alignItems: 'center',
    },
    headerRight:{
        width: '30%',
    },
    menubar:{
        paddingTop: 22,
        paddingLeft: 20
    },

    containerContent:{
        padding: 0,
        paddingBottom: 30
    },
    title:{
        fontSize: 35
    },
    textTitle:{
        marginTop: 10,
    },
    titleRed:{
        fontSize: 25,
        color: '#CC2929',
        marginTop: 30,
        marginBottom: 10
    },
    map: {
        flex: 1
      },
      page: {
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
        backgroundColor: "#F5FCFF"
      },
      containerMap: {
        height: 300,
        width: '100%',
        backgroundColor: "tomato"
      },
      headerStores:{
          width: '100%',
          backgroundColor: '#CD2929',
          textAlign: 'center',
          paddingTop: 20,
          paddingBottom: 20
      },
      headerStoresText:{
          color: 'white',
          textAlign: 'center'
      },
      store:{

        flexDirection: 'row',
        flexWrap: 'wrap',
        alignItems: 'flex-start',
        width: '100%',
        padding: 20
      },
        leftcolumn:{
        width: "50%",
        },
        midcolumn:{
        width: "20%",
        },
        rightcolumn:{
        width: "30%",
        },
        storeTitle:{
            color: '#CD2929',
            fontWeight: "bold",
            fontSize: 30
        },
        hr:{
            backgroundColor: 'grey',
            padding: 5
        }



  });

  export default locationScreen;

import React，{Component}来自'React'；
从“react native”导入{样式表、文本、视图、滚动视图、安全区域视图、图像背景、按钮、触摸不透明度、警报、图像、链接、活动指示器}；
从“反应本机矢量图标/FontAwesome”导入图标；
从“react native elements”导入{ListItem，ThemeConsumer}
从“react native maps”导入{Marker，PROVIDER_GOOGLE}；
//从“react native cluster map”导入{ClusterMap}；
从“react native map clustering”导入MapView；
从“react native firebase”导入firebase；
从“@react native community/Geolocation”导入地理位置；
从“react native launch navigator”导入LaunchNavigator；
如果（Platform.OS==“android”）启动navigator.setGoogleApiKey（“API键”）；
类位置屏幕扩展组件{
建造师（道具）{
超级（道具）；
此.state={
城市：[]，
总数：0，
纬度：0，
经度:0,，
最近位置：空，
}
}
deg2Rad=（度）=>{
返回度*数学PI/180；
}
毕达哥拉斯序列=（lat1，lon1，lat2，lon2）=>{
lat1=此.deg2Rad（lat1）；
lat2=此.deg2Rad（lat2）；
lon1=这个.deg2Rad（lon1）；
lon2=这个.deg2Rad（lon2）；
常数R=6371；
常数x=（lon2-lon1）*数学cos（（lat1+lat2）/2）；
常数y=（lat2-lat1）；
常数d=数学sqrt（x*x+y*y）*R；
返回d；
}
最近的城市=（纬度、经度）=>{
让mindif=99999；
让最近的；
for（让index=0；index{
如果（i.name==this.state.cities[this.state.nearestPlace].name）i.nearest=1；
})
这是我的国家({
城市：这个州，城市，
})
//this.nearestPlace=最近的地方
//返回城市=最近的；
}
导航到=（项目）=>{
控制台日志（项目街道）；
LaunchNavigator.Navigator（item.street+“，“+item.zip+”，“+item.city）
。然后（（）=>console.log（“启动的导航器”））
.catch（（err）=>console.error（“启动导航器时出错：”+err））；
}
setCurrentDirections=（）=>{
Geolocation.getCurrentPosition（位置=>{
这是我的国家({
纬度：位置。坐标。纬度，
经度：position.coords.longitude，
德斯拉特：位置坐标纬度，
desLong:position.coords.longitude，
错误：null，
});
console.log（“到达函数”）；
log（“纬度：+this.state.latitude”）；
log（“longtudent:+this.state.longitude”）；
})
}
setNearestonClick=（clickId）=>{
this.state.cities.forEach（i=>{
如果（i.name==clickId）i.nearest=1；
})
这是我的国家({
城市：这个州，城市，
})
}
onItemClickHandler=（url）=>{
Linking.openURL（url）
}
/*按位置=（数据）=>{
console.log（'location:'+data.lat+'long'+data.long）；
这是我的国家({
纬度：data.lat，
经度：data.long，
错误：null，
});
}
*/
markerCliked=（id）=>{
console.log（“id为：”+id）；
}
纬度=0；
经度=0；
componentDidMount（）{
这是setCurrentDirections（）；
设ref=firebase.database（）.ref（'stores'）；
参考on（'value'，快照=>{
var state=snapshot.val（）；
这是我的国家({
城市：州，
totalStores:state.length，
})
this.nearestCity（this.state.lation，this.state.longitude）；
})
}
render（）{
const{cities}=this.state；
返回(
Aantal VESTINGEN:{this.state.totalStores}
this.markerclike（）}
区域={{
纬度：这个州，纬度，
经度：this.state.longitude，
纬度德尔塔：0.015，
纵向德尔塔：0.0121
}}
>
{
this.state.cities.map（marker=>(
this.setNearestonClick（marker.name）}/>
))
}
region=
{{
   latitude: this.state.latitude,
   longitude: this.state.longitude,
   latitudeDelta: 0.015,
   longitudeDelta: 0.0121
}}