反应本机react-native-maps Mapview不显示

我试图使用airbnb的react-native-maps，但是地图没有显示在模拟器上。我的代码似乎与其他已解决问题的代码相同，但模拟器只是一个带有红色边框的空白白色屏幕。开箱即用Mapview，但我想使用airbnb的版本。反应本机react-native-maps Mapview不显示

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import MapView from 'react-native-maps'; 

export default class Haulr extends Component { 
    render() { 
    return (
    <MapView 
     initialRegion={{ 
     latitude: 37.78825, 
     longitude: -122.4324, 
     latitudeDelta: 0.0922, 
     longitudeDelta: 0.0421, 
     }} 
    /> 
    ); 
    } 
} 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#F5FCFF', 
    }, 
    welcome: { 
    fontSize: 20, 
    textAlign: 'center', 
    margin: 10, 
    }, 
    instructions: { 
    textAlign: 'center', 
    color: '#333333', 
    marginBottom: 5, 
    }, 
    map: { 
    position: 'absolute', 
    top: 0, 
    left: 0, 
    right: 0, 
    bottom: 0, 
    }, 
}); 

AppRegistry.registerComponent('Haulr',() => Haulr);

来源

2016-12-17 Conor Burke

iOS or android？ – Vkrm

你是否设法解决这个问题？我目前有同样的问题:( –

发现此内容有帮助 https://medium.com/@suchydan/how-to-solve-google-play-services-version-collision-in-gradle-dependencies-ef086ae5c75f –

你忘了添加styles到MapView：

<MapView 

    style={styles.map} 

    initialRegion={{ 
    latitude: 37.78825, 
    longitude: -122.4324, 
    latitudeDelta: 0.0922, 
    longitudeDelta: 0.0421, 
    }} 
/>

不要忘记定义样式：

const styles = StyleSheet.create({ 
    map: { 
    ...StyleSheet.absoluteFillObject, 
    },

}）;

因为要使mapView正常工作，您需要将MapView的样式设置为设置了顶部，左侧，右侧和底部值的绝对位置。如上所述in the repo

来源

2016-12-17 07:38:13

This doesn 't为我工作我出于某种原因出现了一个带红色边框的白色屏幕 –

你能分享一些你的代码吗？+你在使用什么平台PS：最好再次提问这个问题 –

这对我有效。 – NSCoder

-1

您看到空白图周围的红色边框的原因是因为在package.json中很可能需要指定版本> = 0.12.4而不是^ 0.12.4（其中意味着与0.12.4兼容）。所以找dependencies部分和变化从

"dependencies": { 
    "react": "15.4.2", 
    "react-native": "0.41.2", 
    "react-native-maps": "^0.12.4", 
    .... 
},

到

"dependencies": { 
    "react": "15.4.2", 
    "react-native": "0.41.2", 
    "react-native-maps": ">=0.12.4", 
    .... 
},

然后，运行以下命令：

$ npm update 
$ react-native link 
$ cd ios 
$ touch Podfile

复制并粘贴sample Podfile您Podfile。更改目标并保存文件。然后运行

$ pod install

您可能还需要style属性添加到您的MapView：

<MapView style={styles.map} 
    initialRegion={{ 
    ... 
    }} 
/>

幸得这个帖子Fuck the red borders of react-native-maps by AirBnb

来源

2017-03-12 20:07:22

-1

我是有这个问题，我所要做的就是重新编译该项目。一旦我做到了，红色边框消失了，我得到了地图渲染。

来源

2017-05-31 19:04:47 chapeljuice

反应本机react-native-maps Mapview不显示

回答

相关问题