空白空间 MapView React Native HMS [英] Blank Space MapView React Native HMS
本文介绍了空白空间 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); 我搜索了有关它的信息，但文档很少，我使用的版本如下:
- 版本
- 反应原生 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:
Map.js
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,
}
});
App.js
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:
- 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
