React Native Maps liteMode 不起作用

Question

代码

import React from 'react';
import {
  StyleSheet,
  Dimensions,
  ScrollView,
} from 'react-native';

import MapView from 'react-native-maps';

const { width, height } = Dimensions.get('window');

const ASPECT_RATIO = width / height;
const LATITUDE = 37.78825;
const LONGITUDE = -122.4324;
const LATITUDE_DELTA = 0.0922;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

const SAMPLE_REGION = {
  latitude: LATITUDE,
  longitude: LONGITUDE,
  latitudeDelta: LATITUDE_DELTA,
  longitudeDelta: LONGITUDE_DELTA,
};

class Map extends React.Component {
  render() {
    const maps = [];
    for (let i = 0; i < 1; i++) {
      maps.push(
        <MapView
          liteMode={true}
          key={`map_${i}`}
          style={styles.map}
          initialRegion={SAMPLE_REGION}
        />,
      );
    }
    return (
      <ScrollView style={StyleSheet.absoluteFillObject}>
        {maps}
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  map: {
    height: 200,
    marginVertical: 50,
  },
});

export { Map };

错误

元素类型无效：应为字符串（用于内置组件）或类/函数（用于复合组件）但未定义。您可能忘记从定义的文件中导出组件。

检查 MapView 的渲染方法。

问题

只有在将 liteMode 属性添加到 MapView 时才会出现此错误。

Answer 1

你必须使用

<MapView
          liteMode
          key={`map_${i}`}
          style={styles.map}
          initialRegion={SAMPLE_REGION}
        />

检查该示例文件 https://github.com/airbnb/react-native-maps/blob/master/example/examples/LiteMapView.js