时间戳

首页 > 解决方案 > 不变违规：元素类型无效：预期为字符串（用于内置组件）

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

问题描述

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

应用程序.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,
},
});

搜索页面.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

标签： react-native

解决方案

当您可能忘记从定义组件的文件中导出组件时，经常会发生您遇到的错误。我看到您的代码已完成。
我运行你的代码。它显示NavigatorIOS已从库中删除。我认为它是由 引起的NavigatorIOS，它只适用于 ios 并且已弃用。你应该使用'react-native-navigation orreact-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()
);

推荐阅读