Question

I'm building an iOS app with React Native and I'm trying to display a map. However, I'm running into a problem. Whenever I'm trying to display the MapView element I get the following error:

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

This is my Main component, which is exactly the same as demonstrated in the MapView documentation时遇到问题（我将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行，它是return方法中的render语句。为完整起见，这是App类：

import React, { Component } from 'react';

import MainIOS from "./ios/Main";

class App extends Component<{}> {
  render() {
    return (<MainIOS />);
    )
  }
}

export default App;

如何解决此问题？我不想使用任何第三方软件包或库，而只使用标准的React Native组件。

Answer 1

如react-native docs for MapView (v0.38)中所述，

MapView类

重要提示：此组件现在已弃用，将于2017年1月删除（React Native版本0.42）。这个组件   仅支持iOS。

请使用Airbnb的react-native-maps代替此   零件。我们在Airbnb的朋友们做了一个非常出色的工作   具有更多功能完整性的跨平台MapView组件。它   被广泛使用（每月超过9k安装）。

React Native Invariant Violation: Element type is invalid

1 个答案:

MapView类