不变违规：元素类型无效：预期为字符串（用于内置组件）

Posted 2023-02-21

【中文标题】不变违规：元素类型无效：预期为字符串（用于内置组件）

【英文标题】：Invariant Violation: Element type is invalid: expected a string( for built-in components)

【发布时间】：2020-02-29 09:54:36

【问题描述】：

React 本机模拟器给出错误 “不变违规：元素类型无效：期望字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。您可能忘记从定义它的文件中导出组件，或者您可能混淆了默认导入和命名导入。

App.js

import React,  Component  from 'react';
import 
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Navigatorios,
  Text,
  StatusBar,
 from 'react-native';
import 
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
 from 'react-native/Libraries/NewAppScreen';

import SearchPage from './SearchPage';

export default class App extends Component<> 
  render() 
    return (
      <NavigatorIOS
        style=styles.container
        initialRoute=
          title: 'Property Finder',
          component: SearchPage,
        />
    );




const styles = StyleSheet.create(
    container: 
  flex: 1,
,
);

SearchPage.js

import React,  Component  from 'react';
import 
  StyleSheet,
  Text,
  TextInput,
  View,
  Button,
  ActivityIndicator,
  Image,
 from 'react-native';;

export default class SearchPage extends Component<> 
  render() 
    return (
      <View style=styles.container>
        <Text style=styles.description>
          Search for houses to buy!
        </Text>
        <Text style=styles.description>
          Search by place-name or postcode.
        </Text>
      </View>
    );
  


const styles = StyleSheet.create(
  description: 
    marginBottom: 20,
    fontSize: 18,
    textAlign: 'center',
    color: '#656565'
  ,
  container: 
    padding: 30,
    marginTop: 65,
    alignItems: 'center'
  ,
);

谁能说出其中的问题。 使用 react-native 版本：0.61

【问题讨论】：

请出示您的代码

我已提交代码，请查看图片上方。

你能把整个代码分享到一个博览会小吃中，以便我们测试它吗？

这就是我得到的@GauravRoy

您运行应用程序的设备是什么？安卓或ios

【参考方案1】：

当您可能忘记从定义组件的文件中导出组件时，经常会发生您遇到的错误。我看到您的代码已完成。 我运行你的代码。它显示 NavigatorIOS 已从库中删除。我认为它是由NavigatorIOS 引起的，它只适用于 ios 并且已弃用。你应该使用'react-native-navigationorreact-native-router-flux'，我建议你使用react-native-router-flux。 如果使用react-native-router-flux，可以看下面的代码：

const App = () => (
  <Router>
    <Stack key="root">
      <Scene key="search" component=SearchParge title="search" />
    </Stack>
  </Router>

// then, if you want to go to it
Actions.search()
);