React Native Maps liteMode 不起作用

Question

Code

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 };

错误

元素类型无效：需要字符串(对于内置组件(或类/函数(对于复合组件(，但未定义。您可能忘记从其定义的文件中导出组件。

检查地图视图的渲染方法。

问题

我只在将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