路线“详细信息”的组件必须是React组件

Question

我正在使用“ expo”在设备上运行react native项目的模拟器中工作 我遇到错误并尝试解决可能的时间，但失败了 这是我的错误的链接

App.js

import React from 'react';
import MovieList from './components/list';
import  Detail from './components/detail';


import { createAppContainer } from 'react-navigation';
import { createStackNavigator } from 'react-navigation-stack';

const AppNavigator = createStackNavigator({
  MovieList: {screen: MovieList},
  Detail: {screen: Detail},

})

const App = createAppContainer(AppNavigator);

export default App();

detail.js

import React from 'react';
import { StyleSheet, Text, View, FlatList, Image } from 'react-native';

export default function Detail() {

  return (
    <View>
   <Text>Details</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#fff",
    alignItems: "center",
    justifyContent: "center"
  },
  item: {
    flex: 1,
    padding: 10,
    height: 50,
    backgroundColor: '#282C35'
  },
  itemText: {
color: '#fff',
fontSize: 24
  }
});

Answer 1

错误在这里

const AppNavigator = createStackNavigator({
  MovieList: {screen: MovieList},
  Detail: {screen: **Detail**},

})

因为您将 Detail 声明为一个函数。而且 StackNavigator 需要 Component

例如

import React, { Component } from "react";
class Detail extends Component {
// Your Code

}

这很好地使用组件而不是功能。

Answer 2

我认为您需要更换

import { createAppContainer } from 'react-navigation'; import { createStackNavigator } from 'react-navigation-stack';

使用

import createAppContainer from 'react-navigation'; import createStackNavigator from 'react-navigation-stack';

由于在createAppContainer / createStackNavigator组件的源文件中使用了导出默认设置，因此不需要在import上进行销毁。