route 的组件必须是 react native 中的 react 组件答案

【问题标题】：The component for route must be a react component in react nativeroute 的组件必须是 react native 中的 react 组件
【发布时间】：2020-01-07 21:46:37
【问题描述】：

我正在使用 react native 创建一个应用程序，并正在使用 createStackNavigator 创建导航以在屏幕之间移动（并发送信息）。

当我运行我的应用程序时，我收到以下错误。

这是我的导航代码。

import { createStackNavigator } from 'react-navigation-stack';
import { createAppContainer } from 'react-navigation';
import HomeScreen from './App';
import SecondActivity from './sermons';

const RootStack = createStackNavigator({
  Home: { 
    screen: HomeScreen 
  },
  Events: { 
   screen: SecondActivity 
  }
});


const AppContainer = createAppContainer(RootStack);

export default AppContainer;

这里是 App.js

import React from 'react';
import {
  StyleSheet,
  FlatList,
  View,
  Text,
  ActivityIndicator
} from 'react-native';
import AppContainer from './nav';

export default class HomeScreen extends React.Component  {
  static navigationOptions =
  {
     title: 'Sermons',
   
  }
  constructor(props) {
    super(props);
    this.state = {
      isLoading: true
    }
  }
  componentDidMount(){
    fetch('http://d74bb1dc.ngrok.io/sermons.php')
    .then((response) => response.json())
    .then((responseJson) => {
      this.setState({
        isLoading: false,
        dataSource: responseJson
      }, () => {
        // In this block you can do something with new state.
      });
    })
    .catch((error) => {
      console.error(error);
    });
}
  ListViewItemSeparator = () => {
    return (
      <View
      style={{
        height: .5,
        width: "100%",
        backgroundColor: "#000",
      }}
    />
    );
  }

  OpenSecondActivity(id) {
    this.props.navigation.navigate("Second", { FlatListClickItemHolder: id});
  }
  render() {
    if (this.state.isLoading) {
      return (
        <View style={{flex: 1, paddingTop: 20}}>
          <ActivityIndicator />
        </View>
      );
    }
    return (
      <View style={styles.MainContainer}>
        <FlatList
          data={this.state.dataSource}
          renderSeparator= {this.FlatListItemSeparator}
          renderItem={({item}) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>}
          //keyExtractor={(item,index) => index}
          />

        <AppContainer />
      </View>
    );
  }
}

我能做些什么来解决这个问题？我已经用谷歌搜索了这个，但似乎没有任何东西可以解决它。

【问题讨论】：

从您发布的代码来看，一切都很好，请确保您正确导入 HomeScreen，因为从“./App”导入它有点奇怪
我的 HomeScreen 代码在 App.js 中
你能发布你的 App.js 文件吗？
我在我的问题中更新了我的代码

标签： javascript reactjs react-native

【解决方案1】：

在 App.js 中，不能像下面这样插入<AppContainer />，

return (
    <View style={styles.MainContainer}>
        <FlatList
            data={this.state.dataSource}
            renderSeparator={this.FlatListItemSeparator}
            renderItem={({ item }) =>
                <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} >
                    {item.Name} {item.DateRecorded}
                </Text>}
        />

        <AppContainer />
    </View>
);

因为您已经导入了您的 app.js import HomeScreen from './App' 并包裹在 <AppContainer /> 中

为了解决这个问题，请创建一个 HomeScreen.js 并在其中插入您的 app.js 代码

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

export default class HomeScreen extends React.Component {
    static navigationOptions =
        {
            title: 'Sermons',
        }
    constructor(props) {
        super(props);
        this.state = {
            isLoading: true
        }
    }
    componentDidMount() {
        fetch('http://d74bb1dc.ngrok.io/sermons.php')
            .then((response) => response.json())
            .then((responseJson) => {
                this.setState({
                    isLoading: false,
                    dataSource: responseJson
                });
            })
            .catch((error) => {
                console.error(error);
            });
    }
    ListViewItemSeparator = () => {
        return (
            <View
                style={{
                    height: .5,
                    width: "100%",
                    backgroundColor: "#000",
                }}
            />
        );
    }

    OpenSecondActivity(id) {
        this.props.navigation.navigate("Second", { FlatListClickItemHolder: id });
    }
    render() {
        if (this.state.isLoading) {
            return (
                <View style={{ flex: 1, paddingTop: 20 }}>
                    <ActivityIndicator />
                </View>
            );
        }
        return (
            <View style={styles.MainContainer}>
                <FlatList
                    data={this.state.dataSource}
                    renderSeparator={this.FlatListItemSeparator}
                    renderItem={({ item }) => <Text style={styles.rowViewContainer} onPress={this.OpenSecondActivity.bind(this, item.id)} > {item.Name} {item.DateRecorded} </Text>}
                />
                <AppContainer />
            </View>
        );
    }
}

之后，将您的 nav 代码导入 app.js 并导出 <AppContainer />，如下所示，

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

如果您有任何疑问，请随时提问。希望对您有所帮助。

【讨论】：