如何实施react-native-maps

Question

希望这可能是一个愚蠢的问题但是因为我是反应本地开发的新手，不知道如何摆脱这个。

我想在MapView＆amp;上添加注释。似乎this tutorial from react-community是最好的方法。

我遵循this tutorial的指导原则，创建了反应原生项目，它运作良好。

我运行这些命令来链接react-native-maps，

npm install react-native-maps --save
react-native link

它给了我以下输出，

但是当我尝试这一行时，

import MapView from "react-native-maps";

它给了我这个错误，请在下面的截图中找到。

我尝试了从上到下的每一件事，清理缓存，重新启动Metro Bundler的每一件事，但还没有成功。

这些教程我已经搜索过在react-native中实现MapView，

1. https://medium.com/@gurusundesh/getting-started-with-react-native-mapview-5e0bd73aa602
2. https://codeburst.io/react-native-google-map-with-react-native-maps-572e3d3eee14
3. https://codedaily.io/tutorials/9/Build-a-Map-with-Custom-Animated-Markers-and-Region-Focus-when-Content-is-Scrolled-in-React-Native

Answer 1

我解决这个问题已经两天了。终于得到了解决方案。

感谢this教程。

通过手动更改package.json中的依赖项来解决此问题： 是：

"dependencies": {
    "react": "16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-maps": "0.20.1"
  },

已更改为

"dependencies": {
    "react": "16.0.0",
    "react-native": "0.51.0",
    "react-native-maps": "0.20.1"
  },

然后跑npm install＆amp; react-native-git-upgrade。

我的App.js代码就在这里。

render() {
    return (
      <View style={styles.container}>
        <MapView
          provider={PROVIDER_GOOGLE}
          style={styles.map}
          region={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.015,
            longitudeDelta: 0.0121,
          }}
        ></MapView>
      </View>
    );
  }

最后我得到了这样的输出。

希望这有效。

Answer 2

我想只有链接不能在地图中工作，你也需要遵循这个指令

https://github.com/react-community/react-native-maps/blob/master/docs/installation.md