Javascript 行动';导航';对于有效负载{quot;name";:“Screen2";}未由任何导航器处理。React navigation 5

Javascript 行动';导航';对于有效负载{quot;name";:“Screen2";}未由任何导航器处理。React navigation 5,javascript,reactjs,react-native,react-navigation-v5,Javascript,Reactjs,React Native,React Navigation V5,我正在为我的react原生应用程序使用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

我正在为我的react原生应用程序使用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.
这里是我的代码:

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.
menu.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>

{props.navigation.navigate(“Screen1”);}>
{
props.navigation.navigate(“Screen1”);//这工作得很好。。。。
}}
/>
{props.navigation.navigate(“Screen2”);
>
{props.navigation.navigate(“Screen2”);//这里发生错误。。。
}}
/>
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>
);
};
从“@react navigation/drawer”导入{createDrawerNavigator};
从“./screens/Screen1”导入Screen1Screen;
从“./screens/Case/Screen2”导入Screen2屏幕;
........................
const Drawer=createDrawerNavigator();
常量MainNavigator=()=>{
返回(
}抽屉样式={{width:“100%”}>
);
};
屏幕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);
从“React”导入React;
从“道具类型”导入道具类型;
从“react redux”导入{connect};
从“react native”导入{View,FlatList,Alert,Platform};
类Screen2扩展了React.Component{
静态类型={
导航:需要PropTypes.object.isRequired,
};
静态导航选项=({navigation})=>({
标题:“屏幕2”
});
componentDidMount=()=>{
这个;
};
componentDidUpdate=()=>{
const{caseData}=this.props;
if(caseData.caseListRefresh){
这个;
}
};
_开始=()=>{
const{setCaseData}=this.props;
setCaseData(“caseListRefresh”,false);
……………
};
渲染=()=>{
const{caseData,ui}=this.props;
返回(
屏幕2
);
};
}
常量mapStateToProps=(状态)=>({});
导出默认连接(mapStateToProps,{})(屏幕2);

如何解决此问题?

在您创建的
Screen2
文件中
Screen2
组件未
Screen2

用以下代码替换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>
    );
    };
从“@react navigation/drawer”导入{createDrawerNavigator};
从“./screens/Screen1”导入Screen1Screen;
从“./screens/Case/Screen2”导入屏幕2;
........................
const Drawer=createDrawerNavigator();
常量MainNavigator=()=>{
返回(
}抽屉样式={{width:“100%”}>
);
};

您能在问题中包括
Screen2Screen
吗?请提供第2屏。我想screen2中的名字可能有问题。@yudhiesh在我的列表中添加了screen2Question@RajshekarYadav在我的问题中添加了Screen2哦,不,我将其导入为“Screen2 Screen”。这一个从“./screens/Case/Screen2”导入Screen2Screen;