问题描述
我正在尝试 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:
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:
- 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的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!