【发布时间】：2022-01-23 00:14:29
【问题描述】：
为了让我的应用程序在 Google PlayStore 和华为应用程序库上都获得批准和可见，我目前维护了两个不同的分支：
-
安装了 react-native-maps 但没有 HMS 包的 Google 分支。
-
已安装 HMS 地图但未安装 react-native-maps 的华为分支。
我知道 HMS+GMS 方法，但根据我的经验，像 react-native-maps 这样严重依赖 GMS 的模块使我的应用对纯 HMS 设备隐藏，即使我的应用有方法检查和永远不要导航到依赖 GMS 的屏幕。
两个分支在 JavaScript 端的代码相同，除了一个用于显示地图的文件，该文件在 GMS 手机上从 react-native-maps 导入，在华为手机上从 react-native-hms-map 导入。
我的问题是：有没有一种方法可以根据产品风格在构建时动态排除某些文件和包，以便我可以使用一个代码库而在构建 APK 时忽略某些文件。
解决方案： 设法提出了一个解决方案，通过禁用反应原生地图的自动链接并根据产品风格手动链接它，使我的应用程序获得批准并在应用程序商店中完全可见。 （代码可能不是最干净的，但它的行为符合预期，因此我们将不胜感激任何清理建议）
步骤：
1.在 android 上禁用 react-native-maps 的手动链接
通过在项目根目录下创建一个名为react-native.config.js的文件，并添加如下内容
module.exports = {
dependencies: {
"react-native-maps": {
platforms: {
android: null,
}
}
}
}
2。为 Google 和华为添加了产品风格
通过将以下内容添加到 android/app/build.gradle
...
...
android{
...
...
flavorDimensions "provider"
productFlavors {
google {
dimension "provider"
}
huawei {
dimension "provider"
}
}
...
...
}
...
...
3。在同一个 android/app/build.gradle 文件中添加了以下内容
...
...
dependencies {
...
...
huaweiImplementation 'com.huawei.hms:location:4.0.2.300'
huaweiImplementation 'com.huawei.hms:hwid:4.0.1.300'
googleImplementation project(':react-native-maps')
...
...
}
...
...
4.将以下内容添加到 android/settings.gradle
include ':react-native-maps'
project(':react-native-maps').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-maps/lib/android')
5.在 android/app/src 中创建了 2 个文件夹
6.在 android/app/src/google/java/com/appname 中添加了一个 java 文件
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
import com.airbnb.android.react.maps.MapsPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return new MapsPackage();
}
}
7.在android/app/src/huawei/java/com/appname里面添加了一个java文件
MapPackageChecker.java
package com.appname;
import com.facebook.react.ReactPackage;
public class MapPackageChecker {
public static ReactPackage getMapPackage() {
return null;
}
}
8.将以下内容添加到 android/app/src/main/java/com/appname/MainApplication.java
import static com.appname.MapPackageChecker.getMapPackage;
...
...
@Override
protected List<ReactPackage> getPackages() {
@SuppressWarnings("UnnecessaryLocalVariable")
List<ReactPackage> packages = new PackageList(this).getPackages();
//start of new lines
if(BuildConfig.FLAVOR.equals("google")){
packages.add(getMapPackage());
}
//end of new lines
return packages;
}
...
...
9.从反应原生代码访问风味名称
我决定为此使用 react-native-build-config
导航组件示例：
import googleMapScreen from "./googleMapScreen.js"; //relies on gms maps
import huaweiMapScreen from "./huaweiMapScreen.js"; //relies on hms maps
import BuildConfig from 'react-native-build-config';
const flavor = BuildConfig.FLAVOR
...
...
<Stack.Screen
name="MapScreen"
component={flavor === "huawei" ? huaweiMapScreen : googleMapScreen}
/>
...
...
10.添加产品风味后，我们需要对命令进行一些更改
yarn react-native run-android
变成： yarn react-native run-android --variant=huaweiDebug
或： yarn react-native run-android --variant=googleDebug
./gradlew assembleRelease
变成： ./gradlew assembleHuaweiRelease
或： ./gradlew assembleGoogleRelease
11.为方便起见，我们可以将以下内容添加到 package.json 脚本中
"scripts":{
"run-huawei": "yarn react-native run-android --variant=huaweiDebug",
"run-google": "yarn react-native run-android --variant=googleDebug",
}
【问题讨论】：
标签： react-native huawei-mobile-services react-native-maps