Question

我已在react app中成功添加了airbnb地图。

但是当我将airbnb地图视图添加到现有的Android原生应用程序时。我总是带着红色边框的空地图。

我正在使用RN 0.40和react-native-maps 0.13.0。

react-native link 命令之后的

。然后android总是有警告： “AIRMap”的原生组件不存在。

使用appParams运行应用程序“App”：{“initialProps”：{}，“rootTag”：1}。 DEV === true，开发级别警告为ON，性能优化为OFF

这里，MainApplication.java文件

tag_discountprice

请建议任何解决方案

Answer 1

在我的情况下，当我尝试在Android模拟器上运行应用程序时，我得到了该错误（和一个空白屏幕）。我通过应用后续步骤解决了这个问题：

1 - 运行react-native link 然后重新启动js服务器（react-native start）并在模拟器上重新部署应用程序（react-native run-android）

2 - 在真实设备或基于GoogleApi系统映像的模拟器上运行。如果你得到一个googleApi not supported message然后在android studio中添加一些软件包并创建一个新设备，如下一个链接所述：

My application relies Google play services, which is not supported by your device. contact the manufacturer for assistance

我的虚拟设备的工作配置：

3 - 在清单文件（android \ app \ src \ main \ AndroidManifest.xml）中添加Google_API_KEY（如果您没有，则必须创建它）：

   <!-- make sure it's a child of application -->
   <meta-data
     android:name="com.google.android.geo.API_KEY"
     android:value="Your Google maps API Key Here"/>

启动设备，重新启动js服务器，在设备上重新部署
一切都应该有效，但是我的google_api_key（一张空的黄色地图）遇到了问题，如下图所示：

所以我在这里为我的项目创建并启用了一个新的 https://developers.google.com/maps/documentation/android-api/signup#release-cert

重新启动JS服务器，运行react-native run-android并运行：

要调试我在一个单独的终端中使用adb logcat。

灵感来自： https://github.com/airbnb/react-native-maps/blob/master/docs/installation.md 从 https://github.com/airbnb/react-native-maps/issues/118

如果地图仍然没有显示您可能需要一些样式。我在我的组件中添加了一个基本的：

import React from 'react'
import MapView from 'react-native-maps';
import {
    View, StyleSheet
} from 'react-native'

const styles = StyleSheet.create({
    container: {
        ...StyleSheet.absoluteFillObject,
        height: 400,
        width: 400,
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    map: {
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        width: 300,
        height: 300
    },
});

export default class MyMap extends React.Component {
    render() {
        const { region } = this.props;

        return (
            <View style ={styles.container}>
                <MapView
                    style={styles.map}
                    region={{
                   latitude: 44.42,
                   longitude: 26.10,
                   latitudeDelta: 0.015,
                   longitudeDelta: 0.0121
                 }}
                >
                </MapView>
            </View>
        );
    }
}

Answer 2

我通过将MapsPackage添加到MainApplication.java文件中的getPackages方法来解决了这个问题。

无需添加@Override

我的代码如下：

protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MapsPackage()
      );
}

Answer 3

ITS WORKING

它重复了这次无法重新创建成功的反应原生地图

反应 - 16.3.1 反应原生 - 0.55.4 react-native-maps - 0.21.0

第1步 我创建了这样的应用程序 $ react-native init tank1

第2步 我按照react-native-maps

进行了安装

第3步 按照Moses Lucas post 重要

进行安装

第4步 在MainApplication.java中使用下面没有@Override

的代码

  protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
              new MainReactPackage(),
              new MapsPackage()
      );
  }

注1 我对@import GoogleMaps;中的synatx AppDelegete.m感到怀疑，但这也很正常

注2 如果您运行react-native link 请检查settings.gradle它不应包含重复的条目

注3 不要从include ':app'

中删除settings.gradle

Android警告：“AIRMap”的本机组件不存在

3 个答案: