安卓警告： "AIRMap" 的本地组件不存在

Question

我已经成功在React应用程序中添加了Airbnb地图。但是，当我将Airbnb地图视图添加到现有的Android原生应用程序时，我总是得到一个带有红色边框的空地图。我正在使用RN 0.40和react-native-maps 0.13.0。在执行"react-native link"命令之后，Android始终会出现警告："AIRMap"的本机组件不存在。 运行应用程序"App" with appParams: {"initialProps":{},"rootTag":1}。DEV === true，开发级别的警告处于ON状态，性能优化处于OFF状态。这是我的MainApplication.java文件。

package punchh.customreactcomponent;

import android.app.Application;

import com.airbnb.android.react.maps.MapsPackage;
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    protected boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

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

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, false);
  }
}

- Garima Mathur

---

你可以更新一下你的帖子，加上你的 Application.java 文件吗？ - martinarroyo

嗯...我本来期望getPackages()函数不会有new MapsPackage()这一行，因为那很可能是错误的原因，但除此之外，我已经没有更多想法了。问题在于名为“AIRMap”的名称在任何本地模块中都找不到。模块名称可以在getName函数中找到，就像这里所示：https://github.com/airbnb/react-native-maps/blob/master/android/src/main/java/com/airbnb/android/react/maps/AirMapModule.java#L43 我建议您仔细查看文件，检查是否存在某种名称不匹配的情况。 - martinarroyo

你成功找到解决这个问题的方法了吗？我在使用React Native模拟器进行开发时也遇到了同样的问题。 - Florin Dobre

@GarimaMathur，你找到解决这个问题的方法了吗？我正在使用react-native-maps(0.13.0)和react-native(0.43.3)。 - Ankush Rishi

好的，我使用 react-native start 修复了它，并关闭了应用程序，然后运行 react-native run-android。 - Ankush Rishi

Answer 1

在我的情况下，当我尝试在Android模拟器上运行应用程序时，出现了错误（以及空白屏幕）。我通过执行以下步骤解决了这个问题： 1 - 运行react-native link，然后重新启动js服务器（react-native start），并在模拟器上重新部署应用程序（react-native run-android） 2 - 在真实设备或基于GoogleApi系统映像的模拟器上运行。如果您收到googleApi不受支持的消息，则请在android studio中添加一些包，并按照下面的链接描述创建一个新设备：

我的应用程序依赖于Google Play服务，但您的设备不支持。联系制造商寻求帮助

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

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的问题（一个空的黄色地图），如下图所示：

因此，我在这里创建并启用了一个特定于我的项目的新API密钥 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>
        );
    }
}

- Florin Dobre

Answer 2

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

不需要添加@Override

我的代码看起来像这样：

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

- Lian van der Vyver

Answer 3

它正在工作

它重复了这个失败，无法成功地重新创建react-native-maps

React - 16.3.1 React Native - 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 我对AppDelegete.m中的@import GoogleMaps;语法有疑问，但这也可以正常工作。

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

注意3 不要从settings.gradle中删除include ':app'。

- vijay