React Native中如何使用Google Maps街景？求Expo兼容方案

我明白你遇到的问题——react-native-streetview确实不支持Expo，这确实挺头疼的。不过有几个可行的替代方案，适合Expo环境：

方案1：使用WebView嵌入Google街景 #

这是最直接且兼容Expo的方法，利用Google Maps街景的嵌入功能，通过Expo的WebView组件加载完整的交互街景：

1. 首先安装Expo官方的WebView包：

expo install react-native-webview

2. 然后在组件中实现街景加载，示例代码：

import { WebView } from 'react-native-webview';

const StreetView = ({ lat, lng }) => {
  // 构造街景嵌入URL，替换为你的Google Maps API密钥和目标坐标
  const streetViewUrl = `https://www.google.com/maps/embed/v1/streetview?key=YOUR_GOOGLE_MAPS_API_KEY&location=${lat},${lng}&fov=80&heading=70&pitch=0`;

  return (
    <WebView
      source={{ uri: streetViewUrl }}
      style={{ flex: 1 }}
      allowsFullscreenVideo={true}
    />
  );
};

export default StreetView;

注意：你需要在Google Cloud控制台启用「Maps Embed API」，并给API密钥设置合理的权限和使用限制，避免被盗用。

方案2：转为Expo Prebuild/Bare Workflow集成原生SDK #

如果你愿意将Expo项目转为预构建（prebuild）或者bare workflow，就能直接集成原生的Google Maps SDK，获得更流畅的原生街景体验：

• 先安装react-native-maps及对应的Expo配置插件：

expo install react-native-maps

• 在app.json中配置Google Maps API密钥，同时为iOS和Android添加街景相关的权限配置（具体可参考react-native-maps的Expo官方文档）。
• 之后可以通过自定义原生模块封装街景功能，或者使用社区中支持bare workflow的街景封装库，直接调用原生SDK的街景能力。

方案3：使用静态街景API（无交互场景） #

如果你的需求只是展示静态街景图片，不需要交互操作，那么可以直接调用Google Maps Street View Static API，用React Native的Image组件展示：

示例代码：

import { Image } from 'react-native';

const StaticStreetView = ({ lat, lng }) => {
  const staticStreetViewUrl = `https://maps.googleapis.com/maps/api/streetview?size=600x400&location=${lat},${lng}&key=YOUR_GOOGLE_MAPS_API_KEY`;
  return <Image source={{ uri: staticStreetViewUrl }} style={{ width: '100%', height: 400 }} />;
};

这个方案无需WebView，轻量简洁，但没有拖拽、旋转等交互功能，适合只需要静态展示的场景。

总结一下，如果你想保持纯Expo Managed Workflow，**方案1（WebView嵌入）**是最推荐的选择，它能提供完整的街景交互体验，且不需要修改项目结构。如果追求更原生的性能，可以考虑方案2转为prebuild项目。

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