本文介绍了空白空间 MapView React Native HMS的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

限时删除!!

我正在尝试 huwaei 的地图服务:

react-native-hms-map

但是当我从我的 stacknavigator 调用组件时,它不显示地图,如果我在 App.js 中只放置 Mapview 的组件,它会显示地图,我尝试使用不同的样式,但我不知道该做什么做.

这是我使用的代码:

Map.js

import React, {Component} from 'react';从'react-native' 导入 {View, StyleSheet, Picker};从'react-native-hms-map'导入MapView;从 '../components/Boton-Fl' 导入 BtnFlotante;从'../../Maps/MarkersExample'导入MarkersExample;从'../../Maps/PolygonsExample'导入PolygonsExample;从'../../Maps/PolylinesExample'导入PolylinesExample;从'../../Maps/CirclesExample'导入CirclesExample;从'../../Maps/OverlaysExample'导入OverlaysExample;从 '../../Maps/exampleConstants' 导入 {region};导出默认类地图扩展组件{构造函数(道具){超级(道具);this.state = {selectedPage: '标记',};}使成为() {返回 (<查看样式={styles.continer} ><视图样式={styles.container}><视图样式={styles.map}><MapView style={styles.map} initialRegion={region}><MarkersExample isRender={this.state.selectedPage}/></地图视图></查看></查看></查看>);}}导出 const 样式 = StyleSheet.create({容器: {位置:'绝对',顶部:0,左:0,右:0,底部:0,justifyContent: 'flex-end',alignItems: '中心',},持有者: {alignItems: '中心',justifyContent: '中心',位置:'绝对',宽度:300,身高:40,背景颜色:'白色',zIndex: 2,阴影颜色:'#000',阴影偏移:{宽度:2,高度:0},阴影不透明度:1,阴影半径:15,海拔:7,},地图: {位置:'绝对',顶部:0,左:0,右:0,底部:0,填充:2,},选择器:{位置:'绝对',顶部:0,左:0,身高:50,宽度:300,颜色:'#000000',},集装箱:{顶部:15,高度:500,边框颜色:'黑色',边框宽度:2,}});

App.js

从'react'导入React;从'react-native-vector-icons/Ionicons'导入图标;import { createBottomTabNavigator, createAppContainer} from 'react-navigation';import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';import { createStackNavigator } from 'react-navigation-stack';import { createSwitchNavigator } from 'react-navigation';从'./src/screens/containers/Login'导入登录;从'./src/screens/containers/loading'导入加载;从./src/screens/containers/Home"导入主页;从./src/screens/containers/Config"导入配置;从 './src/screens/containers/TecnicosScreen' 导入 Tecnico;从 './src/screens/containers/ClientesScreen' 导入 ClientesScreen;从 './src/screens/containers/TareasScreen' 导入 TareasScreen;从./src/tecnicos/containers/tecnicosform"导入 TecnicosForm;从'./src/clientes/containers/clientesform'导入ClientesForm;从 './src/tareas/containers/tareasform' 导入 TareasForm;从./src/tecnicos/containers/tecnicoperfil"导入 TecnicoPerfil;从'./src/clientes/containers/clienteperfil'导入ClientePerfil;从'./src/tareas/containers/tareaperfil'导入TareaPerfil;从'./src/screens/components/header'导入标题;从'./src/screens/containers/Map'导入地图;const InterStack = createStackNavigator({主页:{ 屏幕:主页,导航选项:{标题:标题,}},/*地图:{ 屏幕:地图,导航选项:{标题:空,tabBarVisible:假,}},*/creaClien:{ 屏幕: ClientesForm,导航选项:{标题:标题,}},creaTecni:{ 屏幕: TecnicosForm,导航选项:{标题:标题,}},creaTarea:{ 屏幕: TareasForm,导航选项:{标题:标题,}},perfilTecni:{ 屏幕: TecnicoPerfil,导航选项:{标题:标题,}},perfilClien:{ 屏幕: ClientePerfil,导航选项:{标题:标题,}},perfilTarea:{ 屏幕: TareaPerfil,导航选项:{标题:标题,}},登录:{ 屏幕:登录,导航选项:{标题:空,}},加载中:{ 屏幕:加载中,导航选项:{标题:空,}}});const AnotherStack = createStackNavigator({Tarea :{ 屏幕: TareasScreen,导航选项:{标题:空,}},地图:{ 屏幕:地图,导航选项:{标题:空,tabBarVisible:假,}},});const TabNavigator = createMaterialBottomTabNavigator({主页:{ 屏幕:InterStack,导航选项:{tabBarIcon: ({ tintColor}) =>(),}},客户:{ 屏幕:客户屏幕,导航选项:{tabBarIcon: ({ tintColor}) =>()}},Tecnicos:{ 屏幕:Tecnico,导航选项:{tabBarIcon: ({ tintColor}) =>()}},Tareas:{ 屏幕:AnotherStack,导航选项:{tabBarVisible:假,tabBarIcon: ({ tintColor}) =>()}},配置:{ 屏幕:配置,导航选项:{tabBarLabel:'配置',tabBarIcon: ({ tintColor}) =>(),导航栏隐藏:真,}},},{initialRouteName: '家',order: ['Clientes','Tecnicos', 'Home','Tareas','Config'],activeColor: '白色',barStyle: {backgroundColor: '#3AE0BF'}});导出默认 createAppContainer(TabNavigator);

我搜索了有关它的信息,但文档很少,我使用的版本如下:

  1. 版本
    • 反应原生 0.62.2
    • react-native-hms-maps 4.0.2
解决方案

我已更改旧 React-Native Map Kit 中的 AirMapView.java 文件,问题似乎已解决.

检查以下代码示例:

private final Runnable measureAndLayout = new Runnable() {@覆盖公共无效运行(){措施(MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));布局(getLeft(),getTop(),getRight(),getBottom());}};@覆盖公共无效请求布局(){super.requestLayout();后(测量和布局);}

全新版本的React-Native Map插件将于7月发布,新插件不会出现此问题.

更新:

React Native Map Plugin 4.0.2 将于 2020 年 7 月 30 日后下线.请及时升级您的插件.

I'm trying the map services from huwaei:

react-native-hms-map

But when i call the component from my stacknavigator it doesn't show the map, if I put just de component of Mapview in App.js it show the maps, I try with different styles but I don't know what to do.

This is the code that I use:

import React, {Component} from 'react';
import {View, StyleSheet, Picker} from 'react-native';
import MapView from 'react-native-hms-map';

import BtnFlotante from '../components/Boton-Fl';
import MarkersExample from '../../Maps/MarkersExample';
import PolygonsExample from '../../Maps/PolygonsExample';
import PolylinesExample from '../../Maps/PolylinesExample';
import CirclesExample from '../../Maps/CirclesExample';
import OverlaysExample from '../../Maps/OverlaysExample';


import {region} from '../../Maps/exampleConstants';

export default class Map extends Component {
  constructor(props) {
    super(props);

    this.state = {
      selectedPage: 'marker',
    };
  }

  render() {
    return (
      <View style={styles.continer} >
      <View style={styles.container}>
        <View style={styles.map}>
          <MapView style={styles.map} initialRegion={region}>
            <MarkersExample isRender={this.state.selectedPage} />
          </MapView>
        </View>
      </View>
      </View>
    );
  }
}

export const styles = StyleSheet.create({
  container: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'flex-end',
    alignItems: 'center',
  },
  holder: {
    alignItems: 'center',
    justifyContent: 'center',
    position: 'absolute',
    width: 300,
    height: 40,
    backgroundColor: 'white',
    zIndex: 2,
    shadowColor: '#000',
    shadowOffset: {width: 2, height: 0},
    shadowOpacity: 1,
    shadowRadius: 15,
    elevation: 7,
  },
  map: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    padding: 2,
  },
  picker: {
    position: 'absolute',
    top: 0,
    left: 0,
    height: 50,
    width: 300,
    color: '#000000',
  },
  continer:{
      top: 15,
      height: 500,
      borderColor: 'black',
      borderWidth: 2,
  }
});
import React from 'react';

import Icon from 'react-native-vector-icons/Ionicons';

import { createBottomTabNavigator, createAppContainer} from 'react-navigation';
import { createMaterialBottomTabNavigator } from 'react-navigation-material-bottom-tabs';
import { createStackNavigator } from 'react-navigation-stack';
import { createSwitchNavigator } from 'react-navigation';

import Login from './src/screens/containers/Login';
import Loading from './src/screens/containers/loading';
import Home from './src/screens/containers/Home';
import Config from './src/screens/containers/Config';
import Tecnico from './src/screens/containers/TecnicosScreen';
import ClientesScreen from './src/screens/containers/ClientesScreen';
import TareasScreen from './src/screens/containers/TareasScreen';
import TecnicosForm from './src/tecnicos/containers/tecnicosform';
import ClientesForm from './src/clientes/containers/clientesform';
import TareasForm from './src/tareas/containers/tareasform';
import TecnicoPerfil from './src/tecnicos/containers/tecnicoperfil';
import ClientePerfil from './src/clientes/containers/clienteperfil';
import TareaPerfil from './src/tareas/containers/tareaperfil';
import Header  from './src/screens/components/header';
import Map from './src/screens/containers/Map';

const InterStack = createStackNavigator({
  Home: { screen: Home,
    navigationOptions:{
      header: Header,
    }
  },/*
  Map: { screen: Map,
    navigationOptions:{
      header: null,
      tabBarVisible: false,
    }
  },*/
  creaClien:{ screen: ClientesForm,
    navigationOptions:{
      header: Header,
    }
  },
  creaTecni:{ screen: TecnicosForm,
    navigationOptions:{
      header: Header,
    }
  },
  creaTarea:{ screen: TareasForm,
    navigationOptions:{
      header: Header,
    }
  },
  perfilTecni:{ screen: TecnicoPerfil,
    navigationOptions:{
      header: Header,
    }
  },
  perfilClien:{ screen: ClientePerfil,
    navigationOptions:{
      header: Header,
    }
  },
  perfilTarea:{ screen: TareaPerfil,
    navigationOptions:{
      header: Header,
    }
  },
  Login: { screen: Login,
    navigationOptions:{
      header: null,
    }
  },
  Loading: { screen: Loading,
    navigationOptions:{
      header: null,
    }
  }
});

const AnotherStack = createStackNavigator({
  Tarea :{ screen: TareasScreen,
    navigationOptions:{
      header: null,
    }
  },
  Map: { screen: Map,
    navigationOptions:{
      header: null,
      tabBarVisible: false,
    }
  },
});


const TabNavigator = createMaterialBottomTabNavigator({
  Home: { screen: InterStack,
    navigationOptions: {
      tabBarIcon: ({ tintColor}) =>(<Icon name='md-home' color= {tintColor} size={30}/>),
    }
},
  Clientes: { screen: ClientesScreen,
    navigationOptions: {
      tabBarIcon: ({ tintColor}) =>(<Icon name='md-contact' color= {tintColor} size={30}/>)
    }
},
  Tecnicos: { screen: Tecnico,
    navigationOptions: {
      tabBarIcon: ({ tintColor}) =>(<Icon name='md-contacts' color= {tintColor} size={30}/>)
    }
},
  Tareas: { screen: AnotherStack,
    navigationOptions: {
      tabBarVisible: false,
      tabBarIcon: ({ tintColor}) =>(<Icon name='md-list-box' color= {tintColor} size={30}/>)
    }
},
  Config: { screen: Config,
    navigationOptions: {
      tabBarLabel:'Config',
      tabBarIcon: ({ tintColor}) =>(<Icon name='md-settings' color= {tintColor} size={30}/>),
      navigationBarHidden: true,
    }
},

},{
  initialRouteName: 'Home',
  order: ['Clientes','Tecnicos', 'Home','Tareas','Config'],
  activeColor: 'white',
  barStyle: {backgroundColor: '#3AE0BF'}
}
);

export default createAppContainer(TabNavigator);

I search information about it but theres just little documentation, the versions that I'm using are the followings:

  1. Versions
    • react-native 0.62.2
    • react-native-hms-maps 4.0.2
解决方案

I have changed AirMapView.java file in old React-Native Map Kit and the issue seems to be solved.

Check the following code sample:

private final Runnable measureAndLayout = new Runnable() {
    @Override
    public void run() {
        measure(
                MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
                MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
        layout(getLeft(), getTop(), getRight(), getBottom());
    }
};

@Override
public void requestLayout() {
    super.requestLayout();
    post(measureAndLayout);
}

The brand new version of React-Native Map plugin will be released within July, and this problem does not occur in new plugin.

Update:

React Native Map Plugin 4.0.2 will be placed offline after July 30, 2020. Please upgrade your plugin in time.

这篇关于空白空间 MapView React Native HMS的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

1403页,肝出来的..

09-06 21:14