Android警告:"AIRMap"的本机组件不存在

Question

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

但是当我将airbnb map视图添加到现有的android本机应用程序时.我总是带红色边框的空地图.

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

在react-native链接命令之后.然后android总是有"AIRMap"的Warning: Native组件不存在.

使用appParams运行应用程序"App":{"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);
  }
}

请建议任何解决方案

Answer 1

就我而言，当我尝试在 Android 模拟器上运行应用程序时，我遇到了该错误（和空白屏幕）。我通过应用后续步骤解决了该问题：

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

2-在真实设备或基于GoogleApi系统映像的模拟器上运行。如果您得到了，googleApi not supported message请在 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 （一张空的黄色地图）的问题，如下图所示：

所以我在这里创建并启用了一个专门针对我的项目的新项目 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>
        );
    }
}