安卓版

Question

因此，我正在尝试使用react-native-maps在我的react本机应用程序中实现地图视图。当我使用npm安装它时，一切都很好，并且链接它也不会出错。问题是当我尝试运行它时，我得到了

不变违规：requireNativeComponent：UIManager中没有“ AIRMap”。

我将其范围缩小到了Android方面，因为那是我正在运行的模拟器。由于某种原因，gradle文件似乎已损坏，我不知道它可能是什么。我已经尝试过找到的大多数指南，但似乎没有一个能解决这个问题。我尝试过手动链接，删除链接等。我也尝试过将直接链接添加到GitHub，但也无法解决。

一些构建信息：

反应版本：0.60.0

版本版本：5.4.1

仿真器版本：Pie API 28

settings.gradle：

rootProject.name = 'ProjectName'
apply from: file("../node_modules/@react-native-community/cli-platform-android/native_modules.gradle");     
applyNativeModulesSettingsGradle(settings)
include ':app'
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')

build.gradle：

implementation 'com.facebook.react:react-native:+
implementation project(':react-native-maps')

MapView：

import MapView from 'react-native-maps'
 <MapView
          region={{
            latitude: 42.882004,
            longitude: 74.582748,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421,
          }}
          ></MapView>

最后，我还为android项目中的Google地图创建了一个API。通过启动新的react-native项目并实现react-native-maps，可以轻松地重新创建该项目

Answer 1

安卓版

`AndroidManifest.xml`


    <application
        android:usesCleartextTraffic="true"
        tools:targetApi="28"
        tools:ignore="GoogleAppIndexingWarning">
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
      <!-- You will only need to add this meta-data tag, but make sure it's a child of application -->
      <meta-data
              android:name="com.google.android.geo.API_KEY"
              android:value="AIzDDDBBLn-PhCtBM1AnC_h66yH8Lw2DDD14WW0"/>
    </application>

`MainApplication.java`


import java.util.List;
import com.airbnb.android.react.maps.MapsPackage;  // <-- Add this line

...


        @Override
        protected List<ReactPackage> getPackages() {
          @SuppressWarnings("UnnecessaryLocalVariable")
          List<ReactPackage> packages = new PackageList(this).getPackages();
          // Packages that cannot be autolinked yet can be added manually here, for example:
          // packages.add(new MyReactNativePackage());
          packages.add(new MapsPackage()); // <-  ADD THIS LINE
          return packages;
        }

`android/settings.gradle`

如果您没有使用 monorepo 技术

include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../../../node_modules/react-native-maps/lib/android')

`android/build.gradle`


buildscript {
    ext {
        buildToolsVersion = "29.0.3"
        minSdkVersion = 21
        compileSdkVersion = 29
        targetSdkVersion = 29
        ndkVersion = "20.1.5948944"
        supportLibVersion = '28.0.0'
        playServicesVersion = "17.0.0" // or find latest version
        googlePlayServicesVersion = "17.0.0" // or find latest version
        androidMapsUtilsVersion = "2.2.3"
    }
    repositories {
        jcenter()
        google() // keep google() at last
    }
    dependencies {
        classpath("com.android.tools.build:gradle:4.1.0")
        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    }
}

allprojects {
    repositories {
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url("$rootDir/../../../node_modules/react-native/android")
        }
        maven {
            // Android JSC is installed from npm
            url("$rootDir/../../../node_modules/jsc-android/dist")
        }

        jcenter()
        maven { url 'https://www.jitpack.io' }
        google() // keep google() at last
    }
}

`android/app/build.gradle`


dependencies {

    ...


    implementation project(':react-native-maps') // at last
}

注意事项

我使用 ../../../node_modules 是因为我使用 Monorepo 技术在一个 git 存储库中维护 2 个应用
../node_modules 可能适合您
在代码块的最后保留 google()

IOS

IOS https://stackoverflow.com/a/67945288/3437900

Android：在UIManager中找不到AIRMap

1 个答案:

安卓版