react native mapbox在发布APK中不加载地图答案

【问题标题】：react native mapbox does not load map in release APKreact native mapbox在发布APK中不加载地图
【发布时间】：2020-06-25 14:25:28
【问题描述】：

描述错误

在我的情况下，地图未在发布 APK 中显示（标记显示正确）。不过调试版本没问题。

我也测试过创建不同的令牌。

示例

import React, {Component} from 'react';
import Mapbox, {MapView, Camera} from '@react-native-mapbox-gl/maps';
import {Dimensions, Alert, View, Image, Platform} from 'react-native';
const appConfig = require('../../../app.json');
Mapbox.setAccessToken(appConfig.mapboxAccessToken);

const {height, width} = Dimensions.get('window');

class Map extends Component {
  constructor(props) {
    super(props);
    this.state = {
      basicSetup: {
        showUserLocation: true,
        centerCoordinate: [],
        zoomLevel: 12,
        maxZoomLevel: 19,
        compassEnabled: true,
        logoEnabled: false,
        attributionEnabled: false,
      },
      disable: {
        zoomEnabled: false,
        scrollEnabled: false,
        pitchEnabled: false,
        rotateEnabled: false,
      },
    };
  }
  render() {

    return (
      <View style={[styles.map, style]}>
        <MapView
          styleURL={appConfig['someconfigname']}
          style={{flex: 1}}
          ref={(ref) => {
            this.control = ref;
          }}>
          <Camera ref={(c) => (this.camera = c)} zoomLevel={14} />
          {children}
        </MapView>

        {hideLogo ? null : (
          <View style={[styles.logo, logoStyle]}>
            <Image
              resizeMode={'contain'}
              source={require('../../../resources/images/map_logo.png')}
              style={{flex: 1}}
            />
          </View>
        )}
      </View>
    );
  }
}

export default Map;

const styles = {
  map: {
    width,
    height,
  },
  logo: {
    position: 'absolute',
    bottom: Platform.OS == 'ios' ? 20 : 40,
    left: 20,
    shadowColor: '#37474f',
    shadowOpacity: 0.24,
    shadowOffset: {height: 2, width: 0},
    elevation: 3,
    shadowRadius: 3,
  },
  circle: {
    position: 'absolute',
    borderWidth: 1,
    borderColor: '#111',
    backgroundColor: '#03111111',
    justifyContent: 'center',
    alignItems: 'center',
  },
  circleCenter: {
    height: 4,
    width: 4,
    borderRadius: 4,
    backgroundColor: '#a1a5d1',
  },
  radiusText: {
    fontSize: 13.47,
    color: '#a1a5d1',
  },
};

预期行为

即使处于发布模式，它也应该显示地图

截图

======= 调试模式 =======

======= 发布模式 =======

平台：[Android]

设备：[一加7T]

模拟器/模拟器：[否]

操作系统：[Android 9]

react-native-mapbox-gl 版本 [8.1.0-rc.1]

React Native 版本 [0.62.2]

【问题讨论】：

标签： android react-native react-native-mapbox-gl

【解决方案1】：

问题现在解决了。 Android 阻止了自定义样式 url，这就是地图没有加载的原因。只需添加一些网络规则即可绕过它。在应用标签下的android清单文件中添加了这个，

android:networkSecurityConfig="@xml/network_security_config"

并且，在那个 xml 文件中添加了我们需要实现的网络规则，

    <?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">custom style url</domain>
        <domain includeSubdomains="false">localhost</domain>
        <domain includeSubdomains="false">10.0.2.2</domain>
        <domain includeSubdomains="false">10.0.3.2</domain>
    </domain-config>
</network-security-config>

【讨论】：