Условный рендеринг для служб определения местоположения в React Native

#typescript #react-native #location #expo #conditional-compilation

Вопрос:

У меня есть эта функция, которая выбирает местоположение пользователя с помощью expo-location и google API. Я хочу сделать так, чтобы, если пользователь отклоняет разрешение для служб определения местоположения, он возвращал поле на главном экране, в котором говорилось, что службы определения местоположения отключены. Является ли условный рендеринг способом сделать это?

useMappedLocation.tsx

 interface GeoEntry {
  address_components:[
    {types:("country"|"administrative_area_level_1"|"administrative_area_level_2")[]
      short_name:string,
      long_name:string
    }
  ]
}

interface MappedLocation {
  state:string,
  stateShort: string,
  country:string,
  countryShort:string,
  county:string,
}

async function askLocation(){
    return await Location.requestForegroundPermissionsAsync();

}

async function getLocation(){
  return await Location.getCurrentPositionAsync({});
}


async function getFirstGeoEntry() : Promise<GeoEntry>{

  await askLocation()
  let location = await getLocation();

  const longitude = location.coords.longitude
  const latitude = location.coords.latitude
  const response = await fetch(
          "https://maps.googleapis.com/maps/api/geocode/json?address="  
            latitude  
            ","  
            longitude  
            "amp;key="  
            apiKey
        )
  const json = await response.json();
  return json.results[0]
}

function getStateNameLong(geoEntry:GeoEntry){
  return geoEntry.address_components.filter(
              (x: any) =>
                x.types.filter((t: Object) => t == "administrative_area_level_1")
                  .length > 0
            )[0].long_name
}

function getStateNameShort(geoEntry:GeoEntry){
  return geoEntry.address_components.filter(
              (x: any) =>
                x.types.filter((t: Object) => t == "administrative_area_level_1")
                  .length > 0
            )[0].short_name
}

function getCountryNameLong(geoEntry:GeoEntry){
  return geoEntry.address_components.filter(
              (x: any) => x.types.filter((t: Object) => t == "country").length > 0
            )[0].long_name
            
}


function getCountryNameShort(geoEntry:GeoEntry){
  var countryNameShort =  geoEntry.address_components.filter(
              (x: any) => x.types.filter((t: Object) => t == "country").length > 0
            )[0].short_name
  if (countryNameShort === 'US') {
    countryNameShort = 'USA'
  }
  return countryNameShort

            
}

function getCountyNameLong(geoEntry:GeoEntry){
  return geoEntry.address_components.filter(
              (x: any) => x.types.filter((t: Object) => t == "administrative_area_level_2").length > 0
            )[0].long_name
} 

export async function getMappedLocation() : Promise<MappedLocation>{
  const geoEntry = await getFirstGeoEntry();
  return {
    country:getCountryNameLong(geoEntry),
    countryShort:getCountryNameShort(geoEntry),
    state:getStateNameLong(geoEntry),
    stateShort: getStateNameShort(geoEntry),
    county:getCountyNameLong(geoEntry),
  }
}

export const useMappedLocation = () => {
  const [mappedLocation,setMappedLocation] = useState<MappedLocation>(Object);
  useEffect(() => {
    (async () => {
      setMappedLocation(await getMappedLocation())
    })()
  }, [])
  return mappedLocation;
}
 

Ответ №1:

Вот как я проверяю разрешения. В документах expo есть все другие сведения, которые вам могут понадобиться.

   getCurrentGpsLocation = async () => {

    let status = await Permissions.askAsync(Permissions.LOCATION);
    if (status !== 'granted') {
      throw new Error("Cannot acquire GPS Location due to service loss.");
    }
    ...
  }