ERROR Error: The component for route 'ViewPayments' must be a React component. For example:

Question

我收到这个错误

[Sat Jul 25 2020 09:51:01.475]  ERROR    Error: The component for route 'ViewPayments' must be a React component. For example:

import MyScreen from './MyScreen';
...
ViewPayments: MyScreen,
}

You can also use a navigator:

import MyNavigator from './MyNavigator';
...
ViewPayments: MyNavigator,
}
[Sat Jul 25 2020 09:51:01.485]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)
[Sat Jul 25 2020 09:51:01.487]  ERROR    Invariant Violation: Module AppRegistry is not a registered callable module (calling runApplication)

我想知道为什么会出现这个错误，这就是我的 App.js 代码的样子。

import React, { Component } from 'react';
import { View, Text , TouchableOpacity } from 'react-native';

import {createAppContainer, createSwitchNavigator} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';
import {createDrawerNavigator} from 'react-navigation-drawer';
import Icon from 'react-native-vector-icons/FontAwesome';

import SplashScreen from './src/SplashScreen';
import ViewPayments from './src/ViewPayments';
import RegisterNewTruck from './src/RegisterNewTruck';
import Payments from './src/Payments';

const ViewPaymentsNavigator = createStackNavigator({
  'ViewPayments':{
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
        style={{marginLeft: 20}}
        onPress={() => navigation.toggleDrawer()}>
        <Icon name="indent" size={25} /></TouchableOpacity>
        )})
      },
    });

const RegisterNewTruckNavigator = createStackNavigator({
  'RegisterNewTruck':{
    navigationOptions: ({navigation}) => ({
    headerLeft: () => (
     <TouchableOpacity
     style={{marginLeft: 20}}
     onPress={() => navigation.toggleDrawer()}>
     <Icon name="indent" size={25} /></TouchableOpacity>
     )})
    },
   });

   const PaymentsNavigator = createStackNavigator({
    'Payments':{
      navigationOptions: ({navigation}) => ({
      headerLeft: () => (
       <TouchableOpacity
       style={{marginLeft: 20}}
       onPress={() => navigation.toggleDrawer()}>
       <Icon name="indent" size={25} /></TouchableOpacity>
       )})
      },
     });


     const DrawerNavigator = createDrawerNavigator({
      ViewPayments: {
        navigationOptions: {
          drawerLabel: 'View Payments', 
        },
        screen: ViewPaymentsNavigator,
      },

      RegisterNewTruck: {
        navigationOptions: {
          drawerLabel: 'Register New Truck', 
        },
        screen: RegisterNewTruckNavigator,
      },

      Payments: {
        navigationOptions: {
          drawerLabel: 'Make Payments', 
        },
        screen: PaymentsNavigator,
      },
});

const AppSwitchNavigator = createSwitchNavigator({
  'SplashScreen' : {screen: SplashScreen},
  'Drawer' : {screen: DrawerNavigator}
},
{
  initialRouteName: 'SplashScreen'
})

const App = createAppContainer(AppSwitchNavigator);
export default App;

ViewPayments 看起来像这样：

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

class ViewPayments extends Component {
    static navigationOptions = {
        title : "View Payments"
        }


  render() {
    return (
      <View>
        <Text> ViewPayments </Text>
      </View>
    );
  }
}

export default ViewPayments;

一切都很好，我什至把它当作屏幕，

请问明显有什么问题？我已经搜索并尝试了一些我在互联网上看到的东西，但都无济于事，在这种情况下似乎出了什么问题？

并且当我编译时，我在 Return

中得到这个错误

Answer 1

我已经解决了这个问题。问题恰好是我没有在源代码中包含屏幕。例如：

const ViewPaymentsNavigator = createStackNavigator({
  'View Payments':{screen: ViewPayments,
    navigationOptions: ({navigation}) => ({
      headerLeft: () => (
        <TouchableOpacity
        style={{marginLeft: 20}}
        onPress={() => navigation.toggleDrawer()}>
        <Icon name="menu" size={25} /></TouchableOpacity>
        )})
      },
    });

添加这个，它显示正常无后顾之忧.. 谢谢大家

ERROR Error: The component for route 'ViewPayments' must be a React component. For example:

ERROR Error: The component for route 'ViewPayments' must be a React component. For example:

javascript

navigator

react-native