执行UI块时引发异常：无效区域

Question

我试图在我的React Native应用程序中获取用户位置，然后将MapView移到该位置。应用加载时，它会显示位置（默认情况下，不是因为我的操作），但是执行该操作时，我会收到此错误：

Exception thrown while executing UI block: 
Invalid Region <center:+37.33233141, -122.03121860 span: +0.00044916, -0.05737702>

（通过位置操作）传递给我的MapView的区域对象是

{
  latitude: 37.33233141,
  longitude: -122.0312186,
  accuracy: 0.05,
  latitudeDelta: 0.0004491555874955085,
  longitudeDelta: -0.05737702242408729
};

我实际上是从一个存在相同问题的旧项目中复制代码，然后在某个时候停止出现该问题。

无论如何，这是我的代码：

MapScreen.js

import React, { Component } from "react";
import MapView, { Marker, Callout } from "react-native-maps";
import { connect } from "react-redux";

import { View, Button, Text, Platform, TextInput } from "react-native";

const CurrentRegionMarker = ({ currentRegion }) => {
  return currentRegion && currentRegion.showMarker ? (
    <Marker coordinate={currentRegion} pinColor={"green"} />
  ) : null;
};

class MapScreen extends Component {

  state = { region: null };

  render() {
    return (
      <View style={styles.container}>   
        <MapView
          style={{ flex: 1 }}
          showsUserLocation={true}
          region={this.props.currentRegion}
        >          
          <CurrentRegionMarker currentRegion={this.props.currentRegion} />
        </MapView>
      </View>
    );
  }
}

export default connect(({ location }) => ({
  currentRegion: location.currentRegion
}))(MapScreen);

locationActions.js

// @flow
import * as Location from "expo-location";
import * as Permissions from "expo-permissions";
import type {
  Location as LocationType,
  LocationAction
} from "../reducers/locationReducer";
import type { Saga } from "redux-saga";
import { call, put, select, takeEvery, all } from "redux-saga/effects";

export function getLocationAsync(): LocationAction {
  return { type: "USER_LOCATION_START" };
}

export function* getLocationSaga(): Saga<void> {
  try {
    const region = yield call(getUserLocation);
    yield put({ type: "USER_LOCATION_SUCCESS", region });
  } catch (error) {
    yield put({ type: "USER_LOCATION_FAILURE", error: error.message });
  }
}

async function getUserLocation(): LocationType {
  let { status } = await Permissions.askAsync(Permissions.LOCATION);
  if (status !== "granted") {
    return console.warn("Permission to access location was denied");
  }
  let location = await Location.getCurrentPositionAsync({});
  let { latitude, longitude } = location.coords;
  let accuracy = 0.05;
  let region = { latitude, longitude, accuracy };
  console.log("direct", calculateRegion(region));

  console.log("interpolated", { ...region, ...calculateRegion(region) });
  return { ...calculateRegion(region), accuracy };
}

function calculateRegion({
  latitude,
  longitude,
  accuracy = 0.05
}): LocationType {
  const oneDegreeOfLongitudeInMeters = 111.32;
  const circumference = 40075 / 360;
  const latitudeDelta = accuracy / oneDegreeOfLongitudeInMeters;
  const longitudeDelta = accuracy * (1 / Math.cos(latitude * circumference));
  const region = { latitude, longitude, latitudeDelta, longitudeDelta };
  return region;
}

export default function* locationSaga(): Saga<void> {
  yield all([yield takeEvery("USER_LOCATION_START", getLocationSaga)]);
}

locationReducer.js

// @flow

const initialState: LocationState = {
  currentRegion: {
    latitude: 0,
    longitude: 0,
    latitudeDelta: 0.00922,
    longitudeDelta: 0.00421,
    showMarker: false
  }
};

export default function dealsReducer(
  state: LocationState = initialState,
  action: LocationAction
): LocationState {
  switch (action.type) {
    case "USER_LOCATION_SUCCESS":
      return { ...state, currentRegion: action.region };
    case "USER_LOCATION_FAILURE":
      return { ...state, error: action.error };
    default:
      return state;
  }
}

export type Location = {
  latitude: number,
  longitude: number,
  latitudeDelta: number,
  longitudeDelta: number,
  showMarker?: boolean
};
type LocationState = {
  +currentRegion: Location,
  +error: ?string
};

export type LocationAction =
  | { type: "USER_LOCATION_START" }
  | {
      type: "USER_LOCATION_SUCCESS",
      region: Location
    }
  | {
      type: "USER_LOCATION_FAILURE",
      error: string
    };

更新：看来longitudeDelta和latitudeDelta值是问题所在。现在，我正在使用这些值的硬编码值，但是我仍然不确定为什么这些代码在一个应用程序中而不是在另一个应用程序中能正常工作。