无法在react-native中将类作为函数调用

Question

我目前正在使用世博会处理一个react-native项目，但发生了一个错误，我将分享我的错误和代码，我应该在哪里更改

https://i.stack.imgur.com/kCMGk.png

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 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();

Answer 1

您已经在两个文件中编写了相同的内容，即App.js和details.js。

在react-native中，我们通常将所有屏幕定义在一个文件中，类似于您在App.js文件中所做的操作，然后对于您在App.js中定义的所有屏幕，您必须分别为MovieList和Detail屏幕创建相同的类。

您的MovieList和Details屏幕应如下所示...

import React, { Component } from "react";
import { View } from "react-native";

export default class MovieList extends Component {
  constructor(props) {
    super(props);
    this.state = {

    };
  }

  render() {
    return (
      <View style={{ flex: 1, backgroundColor: 'green' }}>
        <Text> Hello world </Text>
      </View>
    );
  }
}