时间戳

首页 > 解决方案 > 为 web 编译反应本机地图时出错

react-native - 为 web 编译反应本机地图时出错

问题描述

我正在使用 react-native-maps for web 并不断收到我无法解决的错误。我已经尝试了我在互联网上找到的所有内容。

这是我得到的错误，这个错误在 react-native-map 包中。

./node_modules/react-native-maps/lib/components/MapCallout.js
SyntaxError: /home/vishal/Desktop/tracker-app/tracker/node_modules/react-native-maps/lib/components/MapCallout.js: Unexpected token (31:11)

  29 |   render() {
  30 |     const AIRMapCallout = this.getAirComponent();
> 31 |     return <AIRMapCallout {...this.props} style={[styles.callout, this.props.style]} />;
     |            ^
  32 |   }
  33 | }
  34 |

这就是我试图使用 react-native-map 展示的内容

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

class Map extends Component {
  render() {
    return (
      <View style={styles.container}> 
        <Text>in map.js</Text>
        <MapView
          initialRegion={{
            latitude: 37.78825,
            longitude: -122.4324,
            latitudeDelta: 0.0922,
            longitudeDelta: 0.0421
          }}
          style={styles.map}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  map: {
    width: "100%",
    height: "100%"
  }
})
export default Map;

标签： react-nativereact-native-maps

解决方案

我今天遇到了同样的问题，我使用 react-native-web-maps 解决了它：https ://github.com/react-native-web-community/react-native-web-maps

只需要安装：npm install react-native-web-maps --save

并在您的 Webpack 配置中为其添加别名：'react-native-maps': 'react-native-web-maps'

推荐阅读