1

我正在尝试来自huwaei的地图服务：

react-native-hms-map

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

这是我使用的代码：

地图.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,
  }
});

应用程序.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);

我搜索有关它的信息，但只有很少的文档，我正在使用的版本如下：

  1. 版本
    • 反应原生 0.62.2
    • react-native-hms-maps 4.0.2
4

2 回答 2

0

这可能是 React-Navigation-Stack 链接的问题。请仔细阅读日志。

也作为解决方案在项目文件夹中的命令下运行。

yarn add react-navigation-stack @react-native-community/masked-view react-native-safe-area-context

                                        or

npm install react-navigation-stack @react-native-community/masked-view react-native-safe-area-context

于 2020-07-08T06:34:51.780 回答
0

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

检查以下代码示例：

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);
}

在此处输入图像描述

全新版本的 React-Native Map 插件将在 7 月份发布，新插件不会出现此问题。

更新：

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

于 2020-07-08T08:28:06.297 回答