在一个 react-native 项目中使用谷歌地图和 FCM

Posted

技术标签:

【中文标题】在一个 react-native 项目中使用谷歌地图和 FCM【英文标题】:Using google map and FCM in one react-native project 【发布时间】:2018-12-17 20:26:17 【问题描述】:

我想在一个 react native 项目中使用谷歌地图和 FCM,首先我在项目中添加了 FCM,一切正常,但是当我添加谷歌地图时,我遇到了一个错误:

我用谷歌搜索了很多,我尝试了很多答案,但没有一个对我有用,例如: https://github.com/firebase/FirebaseUI-android/issues/1230 , 谁来帮帮我。我将提供我项目的一些屏幕截图,如果您需要其他内容,请告诉我。

【问题讨论】:

【参考方案1】:

注意:我使用的是最新版本的react-native (v0.56.0)。

我在一起使用这些库时遇到了很多问题,最后我得到了这个配置,通过使用下面的配置,我可以成功地构建和运行我的项目:

android/build.gradle文件:

buildscript 
    repositories 
        jcenter()
        google()
        maven 
            url 'https://maven.google.com/'
            name 'Google'
        
    
    dependencies 
        classpath 'com.android.tools.build:gradle:3.1.0'
        classpath 'com.google.gms:google-services:3.0.0'

        // NOTE: Do not place your application dependencies here; they belong
        // in the individual module build.gradle files
    


allprojects 
    repositories 
        mavenLocal()
        google()
        jcenter()
        maven 
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        
        maven 
            url 'https://maven.google.com/'
            name 'Google'
        
    


subprojects 
    afterEvaluate project ->
        if (project.hasProperty("android")) 
            android 
                compileSdkVersion 26
                buildToolsVersion "27.0.3"
            
        
    


ext 
    buildToolsVersion = "27.0.3"
    minSdkVersion = 16
    compileSdkVersion = 26
    targetSdkVersion = 26
    supportLibVersion = "26.1.0"
    googlePlayServicesVersion = "11.0.2"
    androidMapsUtilsVersion = "0.5+"

android/app/build.gradle文件:

...
dependencies 
    ...
    implementation(project(':react-native-maps'))
        exclude group: 'com.google.android.gms', module: 'play-services-base'
        exclude group: 'com.google.android.gms', module: 'play-services-maps'
    
    implementation 'com.google.android.gms:play-services-base:11.0.2'
    implementation 'com.google.android.gms:play-services-maps:11.0.2'
    implementation 'com.google.android.gms:play-services-analytics:11.0.2'
    implementation project(':react-native-fcm')
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation 'com.amplitude:android-sdk:2.13.4'
    implementation "com.android.support:appcompat-v7:$rootProject.ext.supportLibVersion"
    implementation "com.facebook.react:react-native:+"  // From node_modules


// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) 
    from configurations.compile
    into 'libs'


apply plugin: 'com.google.gms.google-services'

android/gradle/wrapper/gradle-wrapper.properties文件:

#Tue Aug 01 12:26:47 IRDT 2017
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.4-all.zip

而this document 对安装react-native-maps 很有用。

【讨论】:

感谢您的回复,但是当我使用最新版本的 react-native 时,我遇到了这个问题。github.com/facebook/react-native/issues/20015。你能解释一下如何解决这个问题吗 你在使用 CRNA 吗? 如果 CRNA 你的意思是 create-react-native-app ,是的,我使用以下命令创建我的项目,有什么问题吗? 没有什么是错的,但因为我没有使用 CRNA 并且我在本地启动了我的应用程序,所以我没有遇到您面临的问题。您是否使用您的react-native 版本尝试了我的配置?请注意,您应该使用正确版本的 gradle。【参考方案2】:

这很可能是由于 fcm 和 map 引入的 Google Play 服务版本之间的冲突。您应该尝试使用项目范围的 gradle 配置。

您也可以阅读一个信号的配置(它与firebase具有相同的功能)以了解您的问题,或者您可以使用android studio打开您的项目,您会看到确切的问题。

   compile('com.onesignal:OneSignal:3.9.1') 
        // Exclude com.android.support(Android Support library) as the version range starts at 26.0.0
        //    This is due to compileSdkVersion defaulting to 23 which cant' be lower than the support library version
        //    And the fact that the default root project is missing the Google Maven repo required to pull down 26.0.0+
        exclude group: 'com.android.support'
        // Keeping com.google.android.gms(Google Play services library) as this version range starts at 10.2.1
    

【讨论】:

您好,您可以点击此链接developer.android.com/studio/build。实际上,我只是尝试在我的项目中排除所有 google play 服务。【参考方案3】:

您的问题是 react-native-map 和 firebae 依赖项彼此不同,因此您需要使用相同版本的 react-native-maps 和 firebase 或您在项目中使用的任何其他 API

【讨论】:

以上是关于在一个 react-native 项目中使用谷歌地图和 FCM的主要内容,如果未能解决你的问题,请参考以下文章

在一个 react-native 项目中使用谷歌地图和 FCM

如何在 C++ 语言中将谷歌地图 API 与 MFC 或 QT 一起使用?

java根据经纬度计算距离

React-Native (iOS) 中的谷歌地图

Android Studio 谷歌地图自定义地图,只想显示自定义地图但利用谷歌地图功能

如何用经纬度查地点?