我正在使用 React Native 构建一个 iOS 应用程序,我正在尝试显示地图。但是,我遇到了一个问题。每当我尝试显示MapView
元素时,都会收到以下错误:
Invariant Violation: Element type is invalid: expected a string (for
built-in components) or a class/function (for composite components)
but got: undefined. You likely forgot to export your component from
the file it's defined in.
Check the render method of `Main`.
This error is located at:
in Main (at App.js:69)
in App (at renderApplication.js:35)
in RCTView (at View.js:113)
in View (at AppContainer.js:102)
in RCTView (at View.js:113)
in View (at AppContainer.js:122)
in AppContainer (at renderApplication.js:34)
createFiberFromElementType
ReactNativeFiber-dev.js:974:90
createFiberFromElement
ReactNativeFiber-dev.js:954:20
reconcileSingleElement
ReactNativeFiber-dev.js:1403:26
reconcileChildFibers
ReactNativeFiber-dev.js:1457:40
reconcileChildrenAtPriority
ReactNativeFiber-dev.js:1634:54
reconcileChildren
ReactNativeFiber-dev.js:1631:12
finishClassComponent
ReactNativeFiber-dev.js:1669:12
updateClassComponent
ReactNativeFiber-dev.js:1659:12
beginWork
ReactNativeFiber-dev.js:1786:23
这是我Main
组件,它与 React Native 网站上的 MapView 文档中演示的完全相同(除了我将showsUserLocation
设置为 false
,这不会导致错误(:
import React, { Component } from 'react';
import { MapView } from 'react-native';
class Main extends Component {
render() {
return (
<MapView
style={{height: 200, margin: 40}}
showsUserLocation={false}
/>
);
}
}
export default Main;
错误是指 App.js
中的第 69 行,这是 render
方法中的return
语句。为了完整起见,这是App
类:
import React, { Component } from 'react';
import MainIOS from "./ios/Main";
class App extends Component<{}> {
render() {
return (<MainIOS />);
)
}
}
export default App;
如何解决此问题?我不喜欢使用任何第三方软件包或库,而只是使用标准的 React Native 组件。
正如它在 MapView 的 react-native 文档中指出的那样 (v0.38(,
地图视图
重要提示:此组件现已弃用,将于 2017 年 1 月删除(React Native 版本 0.42(。此组件 仅支持 iOS。
请使用
react-native-maps
by Airbnb 而不是这个 元件。我们在Airbnb的朋友在建立 跨平台MapView
功能更完整的组件。它 被广泛使用(超过 9K 安装/月(。