问空白MapView反应本机HMS

EN

react-native-hms-map

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