9

我已成功在 react 应用中添加了 Airbnb 地图。

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

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

在react-native 链接命令之后。然后android总是有警告：

“AIRMap”的本机组件不存在。

使用 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);
  }
}
4

3 回答 3

4

就我而言，我在尝试在 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>
        );
    }
}
于 2017-02-13T21:03:04.843 回答
0

它的工作原理

它重复了这种失败以重新创建成功的反应原生地图

反应 - 16.3.1 反应原生 - 0.55.4 反应原生地图 - 0.21.0

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

第 2 步 我从react-native-maps安装

第 3 步 按照摩西卢卡斯的安装后 重要

MainApplication.java 中的第 4步使用下面的代码@Override

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

注 1 我对 synatx 没有任何疑问@import GoogleMaps;，AppDelegete.m但这也很好用

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

注 3 请勿include ':app'从 settings.gradle

于 2018-06-09T19:39:45.823 回答
0

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

无需添加@Override

我的代码如下所示：

protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MapsPackage()
      );
}
于 2017-11-28T20:17:47.680 回答