react-native - 安卓警告 : Native component for "AIRMap" does not exist

Question

我已成功在 React 应用程序中添加了 airbnb map 。

但是当我将 airbnb map View 添加到现有的 android native 应用程序时。我总是得到带有红色边框的空 map 。

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

后 react 原生链接 命令。然后android总是有警告:
“AIRMap”的 native 组件不存在。

使用 appParams 运行应用程序“App”:{"initialProps":{},"rootTag":1}。 DEV === true，开发级警告开启，性能优化关闭

在这里， 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 中添加一些包并创建一个新设备，如下一个链接中所述:

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

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



3 - 在 list 文件 (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(一张空的黄色 map )遇到了问题，如下图所示:

所以我在这里为我的项目创建并启用了一个新的
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

如果 map 仍未显示，您可能需要一些样式。我在我的组件中添加了一个基本的，如下所示:

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>
        );
    }
}