React Native Google Maps Services：如何在回调外获取API响应

你遇到的核心问题是异步代码的执行逻辑：API请求是异步操作，回调函数里的代码会在请求完成后才触发，但你外部的console.log是在请求还没返回结果时就执行了，所以自然拿不到数据。下面给你两种实用的解决方案，以及对应的搜索方向。

方案1：将回调转为Promise，用async/await获取结果 #

这个库的方法可以手动封装成Promise风格，用async/await能让异步代码看起来像同步代码，方便你在函数内直接获取结果：

import { GOOGLE_MAPS_APIKEY } from '@env';
const googleMapsClient = require('react-native-google-maps-services').createClient({
  key: GOOGLE_MAPS_APIKEY,
});

// 把geocode请求封装成Promise
const fetchGeocode = (address) => {
  return new Promise((resolve, reject) => {
    googleMapsClient.geocode({ address }, (err, response) => {
      if (err) reject(err);
      else resolve(response.json.results);
    });
  });
};

async function Libtest() {
  try {
    const geocodeResults = await fetchGeocode('1600 Amphitheatre Parkway, Mountain View, CA');
    console.log('获取到的地理编码结果:', geocodeResults);
    // 这里可以直接用geocodeResults做后续业务逻辑处理
  } catch (err) {
    console.error('地理编码请求出错:', err);
  }
}

export default Libtest;

方案2：在React组件中用useState存储结果（适配UI渲染场景） #

如果你的代码是在React组件里，需要把结果展示到界面上，应该用useState管理状态，请求完成后更新状态触发组件重新渲染：

import { useState, useEffect } from 'react';
import { Text } from 'react-native';
import { GOOGLE_MAPS_APIKEY } from '@env';
const googleMapsClient = require('react-native-google-maps-services').createClient({
  key: GOOGLE_MAPS_APIKEY,
});

function GeocodeComponent() {
  const [results, setResults] = useState(null);
  const [requestError, setRequestError] = useState(null);

  useEffect(() => {
    googleMapsClient.geocode(
      { address: '1600 Amphitheatre Parkway, Mountain View, CA' },
      (err, response) => {
        if (err) {
          setRequestError(err);
        } else {
          setResults(response.json.results);
        }
      }
    );
  }, []);

  if (requestError) return <Text>请求失败：{requestError.message}</Text>;
  if (!results) return <Text>加载中...</Text>;

  // 渲染结果到UI
  return (
    <Text>
      目标坐标：
      纬度 {results[0].geometry.location.lat}，
      经度 {results[0].geometry.location.lng}
    </Text>
  );
}

export default GeocodeComponent;

你之前尝试失败的原因 #

• googleMapsClient()：这是调用客户端实例，不是获取API响应，自然没有有效结果
• test.response.json.results：test是geocode方法的返回值（通常是请求实例或undefined），不是响应对象，所以拿不到response属性
• 所有外部console.log都在异步请求完成前执行，此时响应还未生成，输出自然是无效值

搜索方向建议 #

• JavaScript异步编程基础：搜索「JavaScript 回调函数 异步执行顺序」「Promise async/await 用法」
• 库相关用法：搜索「react-native-google-maps-services promise 封装」
• React状态管理：搜索「React Native useState 异步状态更新」

内容的提问来源于stack exchange，提问作者ceci