如何实现 react-native-maps

Question

希望这是个愚蠢的问题，但由于我是 react-native 开发的新手，所以不知道如何摆脱它。

我想在 MapView 上添加注释，看来 this tutorial from react-community 是最好的方法。

我遵循了 this tutorial 的指导方针，创建了 react-native 项目，它运行完美。

我 运行 这些命令到 link 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

我猜只有 link 不会在地图中工作你也需要遵循此说明

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

Answer 2

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

感谢 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 & 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>
    );
  }

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

希望这有效。