javascript - 带有有效载荷 'NAVIGATE' {"name"} 的 Action :"Screen2"未被任何导航器处理。 react 导航 5

Question

我正在为我的 native 应用程序使用 react navigation 5.x。在尝试从菜单导航到一个屏幕时，我总是遇到错误。
错误是:

The action 'NAVIGATE' with payload {"name":"Screen2"} was not handled by any navigator.

Do you have a screen named 'Screen2'?
This is a development-only warning and won't be shown in production.

这里是我的代码:
菜单.js

<View style={styles.container}>    
<TouchableOpacity style={[styles.menuItemsCard, { backgroundColor: "#fff2df", width: width, height: height }]} 
                              onPress={() => {  props.navigation.navigate("Screen1"); }} >                           
          <View style={[styles.circleContainer, { backgroundColor: "#FFC56F" }]}>
            <Icon travel name="suitcase" type="font-awesome" color="#fbae41" size={25} />
          </View>
          <DrawerItem
            label="PatientInfo"
            labelStyle={{ color: "#fbae41" }}
            onPress={() => {
              props.navigation.navigate("Screen1"); //This is working Perfectly....
            }}
          />
</TouchableOpacity>

<TouchableOpacity
          style={[
            styles.itemCard,
            {
              backgroundColor: "#E9DFFF",
              width: width,
              height: height,
              marginLeft: 10,
              marginTop: 10
            }
          ]}
         onPress={() => {props.navigation.navigate("Screen2");
        >
          <View style={[styles.circleContainer, { backgroundColor: "#c8b0ff" }]}>
            <Icon name="chat" color="#8455eb"></Icon>
          </View>
          <DrawerItem
            label="SavedCase"
            labelStyle={{ color: "#8455eb" }}
            onPress={() => {props.navigation.navigate("Screen2");//Here the Error Occurring...
            }}
          />
 </TouchableOpacity>
 </View>

MainNavigator.js

import { createDrawerNavigator } from "@react-navigation/drawer";   
import Screen1Screen from "../screens/Screen1";
import Screen2Screen from "../screens/Case/Screen2";

........................
const Drawer = createDrawerNavigator();
const MainNavigator =() => {
return (
<Drawer.Navigator drawerContent={props => <Menu {...props} />} drawerStyle={{ width: "100%" }}>
  <Drawer.Screen name=“Screen1” component={Screen1Screen} />
  <Drawer.Screen name=“Screen2” component={Screen2Screen} />
</Drawer.Navigator>
);
};

屏幕2:

  import React from "react";
  import PropTypes from "prop-types";
  import { connect } from "react-redux";
  import { View, FlatList, Alert, Platform } from "react-native";
  class Screen2 extends React.Component {
  static propTypes = {
    navigation: PropTypes.object.isRequired,
   };



  static navigationOptions = ({ navigation }) => ({
         headerTitle: "Screen2"
  });

  componentDidMount = () => {
     this._start();
  };

  componentDidUpdate = () => {
    const { caseData } = this.props;

  if (caseData.caseListRefresh) {
     this._start();
  }
 };

_start = () => {
  const { setCaseData } = this.props;
  setCaseData("caseListRefresh", false);
  ……………
};

render = () => {
  const { caseData, ui } = this.props;
return (
  <View>
    <View style={styles.container}>
           <Text>Screen2</Text>
    </View>
);
};
}
const mapStateToProps = (state) => ({});

export default connect(mapStateToProps, {})(Screen2);

我该如何解决这个问题？

Answer 1

在您的 Screen2 文件中，您创建了 Screen2 组件而不是 Screen2Screen用此代码替换您的 MainNavigator.js 文件

import { createDrawerNavigator } from "@react-navigation/drawer";   
    import Screen1Screen from "../screens/Screen1";
    import Screen2 from "../screens/Case/Screen2";
    
    ........................
    const Drawer = createDrawerNavigator();
    const MainNavigator =() => {
    return (
    <Drawer.Navigator drawerContent={props => <Menu {...props} />} drawerStyle={{ width: "100%" }}>
      <Drawer.Screen name=“Screen1” component={Screen1Screen} />
      <Drawer.Screen name=“Screen2” component={Screen2} />
    </Drawer.Navigator>
    );
    };