元素類型無效：需要一個字符串（對於內置組件）或一個類/函數（對於復合組件）

Question

我正在嘗試在我的本機應用程序中使用導航，但是收到錯誤。

這是我的index.js文件：

import React, { Component } from 'react'
import { AppRegistry } from 'react-native';
import App from './App';

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

AppRegistry.registerComponent('ChatNow', () => App);

我收到以下錯誤：

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object

我還嘗試注釋掉該類，並按照創建基本index.js文件時的方式運行該類，但是遇到相同的錯誤。

在這種情況下，app.js文件旨在實現一個Navigator組件，該組件已從react native中棄用，但通過“ react-native-deprecated-custom-components”重新實現。

這是我的app.js代碼：

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  TouchableOpacity
} from 'react-native';
import Navigator from 'react-native-deprecated-custom-components';

import MainScreen from './components/mainScreen'
import SignInScreen from './components/signInScreen';

export default class App extends Component {
  _renderScene(route, navigator) {
    switch(route.name) {
      case 'SignInScreen':
        return <SignInScreen />
      case 'MainScreen':
        return <MainScreen />
    }
  }

  render() {
    return(
      <Navigator 
        initialRoute={{name: 'MainScreen', title: 'Welcome'}}
        renderScene={this._renderScene}
        style={styles.container}
        sceneStyle={styles.sceneContainer}
      />
    )
  }
}

Answer 1

嗨，我相信問題是您沒有將頂級組件傳遞給AppRegistry.registerComponent，而不是App應該是ChatNow，但是我個人使用它的方式（如果ChatNow沒有做任何事情，您可以擺脫它）並執行以下操作：

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('ChatNow', () => App);

我希望這會有所幫助，我嘗試發表評論，但我沒有足夠的代表。

Answer 2

好吧，那是最愚蠢的事...

原來導致該問題的代碼行是：

import Navigator from 'react-native-deprecated-custom-components';

應該是：

import { Navigator } from 'react-native-deprecated-custom-components';

哎呀。