HMS 地图套件和 React Native 0.74.0 不显示

Question

我一直试图让 "@hmscore/react-native-hms-map": "6.11.2-302" 工作一段时间，但我无法得到它，这是我的代码：

Android/文件夹中的build.gradle：

buildscript { 
ext { buildToolsVersion = "34.0.0" 
minSdkVersion = 23 
compileSdkVersion = 34 
targetSdkVersion = 34 
ndkVersion = "26.1.10909125" 
kotlinVersion = "1.9.22" } 
repositories {
 google() 
mavenCentral() 
maven { url 'https://developer.huawei.com/repo/' } }
 dependencies {
 classpath("com.android.tools.build:gradle:8.3.2") 
classpath("com.facebook.react:react-native-gradle-plugin") classpath("org.jetbrains.kotlin:kotlin-gradle-plugin") 
classpath 'com.huawei.agconnect:agcp:1.9.1.301' } } 
allprojects { 
repositories { 
google() 
mavenCentral() 
maven { url 'https://developer.huawei.com/repo/' } } } 
apply plugin: "com.facebook.react.rootproject"

Android/app/文件夹中的build.grandle：

apply plugin: "com.android.application" apply plugin: "com.huawei.agconnect" apply plugin: "org.jetbrains.kotlin.android" apply plugin: "com.facebook.react"

/**

This is the configuration block to customize your React Native Android app.

By default you don't need to apply any configuration, just uncomment the lines you need. / react { / Folders */ //   The root of your project, i.e. where "package.json" lives. Default is '..' // root = file("../") //   The folder where the react-native NPM package is. Default is ../node_modules/react-native // reactNativeDir = file("../node_modules/react-native") //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen // codegenDir = file("../node_modules/@react-native/codegen") //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js // cliFile = file("../node_modules/react-native/cli.js")

/* Variants */ //   The list of variants to that are debuggable. For those we're going to //   skip the bundling of the JS bundle and the assets. By default is just 'debug'. //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants. // debuggableVariants = ["liteDebug", "prodDebug"]

/* Bundling */ //   A list containing the node command and its flags. Default is just 'node'. // nodeExecutableAndArgs = ["node"] // //   The command to run when bundling. By default is 'bundle' // bundleCommand = "ram-bundle" // //   The path to the CLI configuration file. Default is empty. // bundleConfig = file(../rn-cli.config.js) // //   The name of the generated asset file containing your JS bundle // bundleAssetName = "MyApplication.android.bundle" // //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js' // entryFile = file("../js/MyApplication.android.js") // //   A list of extra flags to pass to the 'bundle' commands. //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle // extraPackagerArgs = []

/* Hermes Commands */ //   The hermes compiler command to run. By default it is 'hermesc' // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc" // //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map" // hermesFlags = ["-O", "-output-source-map"] }

/**

Set this to true to Run Proguard on Release builds to minify the Java bytecode. */ def enableProguardInReleaseBuilds = false

/**

The preferred build flavor of JavaScriptCore (JSC)



For example, to use the international variant, you can use:

def jscFlavor = 'org.webkit:android-jsc-intl:+'



The international variant includes ICU i18n library and necessary data

allowing to use e.g. Date.toLocaleString and String.localeCompare that

give correct results when using with locales other than en-US. Note that

this variant is about 6MiB larger per architecture than default. */ def jscFlavor = 'org.webkit:android-jsc:+'

android { ndkVersion rootProject.ext.ndkVersion buildToolsVersion rootProject.ext.buildToolsVersion compileSdk rootProject.ext.compileSdkVersion

namespace "com.koipo.admin"
defaultConfig {
    applicationId "com.koipo.admin"
    minSdkVersion rootProject.ext.minSdkVersion
    targetSdkVersion rootProject.ext.targetSdkVersion
    versionCode 1
    versionName "1.0"
}
signingConfigs {
    debug {
        storeFile file('mykeystore.jks')
        storePassword '123456'
        keyAlias 'grekosys'
        keyPassword '123456'
    }
}
buildTypes {
    debug {
        signingConfig signingConfigs.debug
    }
    release {
        // Caution! In production, you need to generate your own keystore file.
        // see https://reactnative.dev/docs/signed-apk-android.
        signingConfig signingConfigs.debug
        minifyEnabled enableProguardInReleaseBuilds
        proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
    }
}

}

dependencies { // The version of react-native is set by the React Native Gradle Plugin implementation("com.facebook.react:react-android") implementation 'com.huawei.hms:maps:6.11.2.301'

if (hermesEnabled.toBoolean()) {
    implementation("com.facebook.react:hermes-android")
} else {
    implementation jscFlavor
}

}

apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

index.js:

/**

@format */

import {AppRegistry} from 'react-native'; import App from './App'; import {Mapa} from './Koipo/Mapa'; import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => Mapa);

Mapa.js：

import React from 'react'; 
import {StyleSheet, Text, View} from 'react-native'; 
import HMSMap, {MapTypes} from '@hmscore/react-native-hms-map';

export function Mapa() { 
return ( 
<View style={styles.vista}> 
<HMSMap 
mapType={MapTypes.NORMAL} 
style={{height: 400}} 
camera={{target: {latitude: 41, longitude: 29}, zoom: 11}} /> 
<Text>Mapas</Text> 
</View> ); }

const styles = StyleSheet.create({ vista: { flex: 1, }, });

AndroidManifest.xml：

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
<uses-permission android:name="com.huawei.appmarket.service.commondata.permission.GET_COMMON_DATA"/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/>
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

<application
  android:name=".MainApplication"
  android:label="@string/app_name"
  android:icon="@mipmap/ic_launcher"
  android:roundIcon="@mipmap/ic_launcher_round"
  android:allowBackup="false"
  android:theme="@style/AppTheme"
  android:requestLegacyExternalStorage="true"
    android:usesCleartextTraffic="true">
  <meta-data
android:name="com.huawei.hms.api.API_KEY"
android:value="xxxxxx" />
<meta-data
        android:name="com.huawei.hms.client.appid"
        android:value="1111222"/>
    
  <activity
    android:name=".MainActivity"
    android:label="@string/app_name"
    android:configChanges="keyboard|keyboardHidden|orientation|screenLayout|screenSize|smallestScreenSize|uiMode"
    android:launchMode="singleTask"
    android:windowSoftInputMode="adjustResize"
    android:exported="true">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
  </activity>
</application>

我对 gradle 和 agconnect 的版本做了很多更改，但没有任何效果。我希望你能帮助我

我 gustaria saber como hacer que el mapa se Visualice en modo desarrollador

Answer 1

不确定这是否能解决你的问题，

我的应用程序也遇到同样的问题（只有一个空白空间）。我在 logcat 中发现一个错误，指出“MapsInitialiser 未初始化”。

我最终发现我必须在调用的页面上有一个 useEffect

HMSMap.module.initializer("apiKey", "routePolicy")

我没有路由我的数据，所以我只是将其保留为空。

希望这对任何人都有帮助！这让我发疯