在 React Native 应用程序中哪里可以找到 AndroidManifest.xml？

Question

我使用 Expo 创建了一个移动应用程序，并在尝试在 Android 模拟器上使用 React-native-maps 时收到此错误。

我按如下方式修改了 app.json 文件以包含 api 密钥，如下所示：

"android": {
  "adaptiveIcon": {
    "foregroundImage": "./assets/adaptive-icon.png",
    "backgroundColor": "#FFFFFF"
  },
  "package": "com.sjroy5.worksideclient",
  "config": {
    "googleMaps": {
      "apiKey": "API_KEY"
    }
  },
  "versionCode": 2
},

地图在我的 IOS 设备上运行得很好。有什么建议吗？

Answer 1

AndroidManifest.xml

文件位于以下路径

android > 应用程序 > src > 调试 > AndroidManifest.xml

并且

android > 应用程序 > src > main > AndroidManifest.xml

只需编辑主文件中的清单文件就足够了。

Answer 2

1. 您面临的问题是由于 app.json 文件中的配置对象不是放置 Google Maps API 密钥的正确位置。 config对象用于配置各种Expo服务，但它不直接配置react-native-maps包。

2. 将provider prop添加到MapView组件并将其设置为MapView.PROVIDER_GOOGLE。最后，将 apiKey 属性传递给 MapView 组件并将其设置为您的 Google 地图 API 密钥。

   import MapView from 'react-native-maps';
   
   <MapView
    provider={MapView.PROVIDER_GOOGLE}
    style={styles.map}
    region={{
     latitude: 37.7749,
     longitude: -122.4194,
     latitudeDelta: 0.0922,
     longitudeDelta: 0.0421,
   }}
   apiKey="AIzaSyDyhqHd1Zk266sB-HNeBXlO2dUs0XQuUxQ"
   />
   

3. 如果您想将 API 密钥保存在单独的文件中以提高安全性，可以通过在项目的根目录中创建 .env 文件并将 API 密钥添加到其中来实现。

   GOOGLE_MAPS_API_KEY = AIzaSyDyhqHd1Zk266sB-HNeBXlO2dUs0XQuUxQ
   

4. 安装 expo-constants 包

   expo install expo-constants
   

5. 从 expo-constants 导入 Constants 对象并使用它来访问 API 密钥

   import Constants from 'expo-constants';
   
   <MapView
     provider={MapView.PROVIDER_GOOGLE}
     style={styles.map}
     region={{
       latitude: 37.7749,
       longitude: -122.4194,
       latitudeDelta: 0.0922,
       longitudeDelta: 0.0421,
     }}
    apiKey={Constants.manifest.extra.GOOGLE_MAPS_API_KEY}
   />