ERROR 带有负载 {"name":"InvoicesScreen","params":{"item":"Invoices"}} 的操作 'NAVIGATE' 没有被任何导航器处理

问题描述 投票:0回答:0

你好一切都好吗?我正在开发一个商业应用程序。第一次访问/单击时,我遇到了与 Stack 和 Drawer 导航相关的问题。

此应用程序使用 API 登录 (ScreenLogin),仅使用 CPF(个人密码)进行身份验证。认证成功后,会跳转到首页(ScreenHome),这里会报错

第一次登录时,会出现这个错误,即第一次登录时,app crash。请记住,第二次以后打开应用程序不会出现错误,并且运行完全正常。

错误:

当我点击onPress={this.props.navigation.navigate("InvoicesScreen")}

错误带有负载 {"name":"InvoicesScreen","params":{"item":"Invoices"}} 的操作 'NAVIGATE' 没有被任何导航器处理。
你有一个名为“InvoicesScreen”的屏幕吗?
如果您尝试导航到嵌套导航器中的屏幕,请参阅https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator
这是一个仅限开发的警告,不会在生产中显示。

当我点击onPress={() => this.props.navigation.openDrawer()}

ERROR TypeError: undefined is not a function, js engine: hermes

在我的代码下面:

App.js

if (appLoaded && fontsReady && imagesReady) {
    return (
        <NativeBaseProvider>
            <RootSiblingParent>
                <StatusBar backgroundColor={Colors.PRIMARY} barStyle='light-content'/>
                <NavigationContainer>
                    {isLogged ? <Logged/> : <Guest/>}
                </NavigationContainer>  
            </RootSiblingParent>
        </NativeBaseProvider>
    );
}

Login.js

_getData = async () => {   

        this.setState({ buttonVisible: false });
        const { senha }  = this.state;

        if (senha.length <= 0) {
            Toast.show('O campo CPF/CNPJ não pode ser vazio', Toast.LONG, { backgroundColor: 'blue', fontSize: 28, fontFamily: 'Montserrat-Regular' });
            this.setState({ buttonVisible: true });
            return;
        }

        return await fetch(Configs.URL+`json/data_contratos.php?cpf=${senha}&senha=${senha}&ip=${Configs.IP}`)
        .then((response) => response.json())
        .then((responseJson) => {
            this.setState({
                dataContrato: responseJson.contratos,
                contrato: responseJson.contratos[0].contrato,
                keystatus: responseJson.contratos[0].status.trim(),
                contContrato: responseJson.contratos.length
            }); 
            const { contContrato, contrato, keystatus } = this.state;
            if (contContrato > 1) {
                this._openModalContratos();
                this.setState({ buttonVisible: true });
                return null;
            } else {
                AsyncStorage.setItem('keycontrato'+Configs.SLUG, contrato.toString());
                AsyncStorage.setItem('keycpfcnpj'+Configs.SLUG, senha);
                AsyncStorage.setItem('keysenha'+Configs.SLUG, senha);
                AsyncStorage.setItem('keystatus'+Configs.SLUG, keystatus);
                this._goHome();
            }
        }).catch((e)=> {
            Toast.show('O CPF/CNPJ não foi localizado.', Toast.LONG, { backgroundColor: 'blue', fontSize: 28, fontFamily: 'Montserrat-Regular' });
            this.setState({ buttonVisible: true });
        });
        
    }
_goHome = () => {
        const resetAction = CommonActions.reset({
            index: 0,
            routes: [
                { name: 'HomeScreen' }
            ],
        });
        this.props.navigation.dispatch(resetAction);
    };

导航:

Guest.js

import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import HelpsScreen from '../screens/Helps';
import HomeScreen from '../screens/Home';
import LoginScreen from '../screens/Login';
import Colors from '../utils/Colors';

const Stack = createStackNavigator();

export default function StackNavigation(props){

    const buttonLeft = () => {
        return (
            <Ionicons name={'md-arrow-back'} onPress={ () => { navigation.goBack() }} style={styles.arrowbackicon}/>
        )
    };
    
    const navigatorOptions = {
        headerStyle: {
            backgroundColor: Colors.PRIMARY,
            shadowColor: 'transparent',
            elevation: 0,
            shadowOpacity: 0,
        },
        headerTitleStyle: {
            fontSize: 18,
            color: Colors.BLACK
        },
        headerTitleAlign: 'center',
        headerBackTitleVisible:false,
        headerTintColor: Colors.BLACK
    }

    return (
        <Stack.Navigator screenOptions={navigatorOptions}>
            <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="HelpsScreen" component={HelpsScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: false }}/>
        </Stack.Navigator>
    )
    
}

Logged.js

import { Ionicons } from '@expo/vector-icons';
import { createStackNavigator } from '@react-navigation/stack';
import React from 'react';
import { StyleSheet } from 'react-native';
import DetectorScreen from '../screens/Detector';
import HomeScreen from '../screens/Home';
import InternetScreen from '../screens/Internet';
import InvoicesScreen from '../screens/Invoices';
import LoginScreen from '../screens/Login';
import ReactivateScreen from '../screens/Reactivate';
import SpeedScreen from '../screens/Speed';
import SupportScreen from '../screens/Support';
import SupportSendScreen from '../screens/SupportSend';

import Colors from '../utils/Colors';

const Stack = createStackNavigator();

export default function Logged(props){

    const {navigation} = props;
    
    const navigationOptions = {
        headerStyle: styles.headerStyle,
        headerBackTitle: null,
        headerTintColor: Colors.PRIMARY,
        headerTitleAlign: 'center',
        headerTitleStyle: {
            textAlign: 'center',
            alignSelf: 'center',
            justifyContent: 'space-between',
            fontSize: 16,
            color: Colors.PRIMARY,
            fontWeight: 'bold'
        },
        headerBackTitleVisible:false,
    }

    const buttonLeft = () => {
        return (
            <Ionicons name={'md-arrow-back'} onPress={ () => { navigation.goBack() }} style={styles.arrowbackicon}/>
        )
    };

    return (
        <Stack.Navigator screenOptions={navigationOptions}>
            <Stack.Screen name="HomeScreen" component={HomeScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="InvoicesScreen" component={InvoicesScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="ReactivateScreen" component={ReactivateScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="SupportScreen" component={SupportScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="SupportSendScreen" component={SupportSendScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="SpeedScreen" component={SpeedScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="InternetScreen" component={InternetScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="DetectorScreen" component={DetectorScreen} options={{ headerShown: false }}/>
            <Stack.Screen name="LoginScreen" component={LoginScreen} options={{ headerShown: false }}/>
        </Stack.Navigator>
    )
    
}

const styles = StyleSheet.create({
    headerStyle:{
        backgroundColor: Colors.PRIMARY,
        shadowOpacity: 0,
        borderBottomWidth: 0,
        elevation: 0,
    },
}) 

Navigation.js

import { createDrawerNavigator } from "@react-navigation/drawer";
import React from "react";
import Logged from './Logged';
import SideMenu from './SideMenu';

const Drawer = createDrawerNavigator();

const Navigation = () => {
  return (
    <Drawer.Navigator initialRouteName="app" drawerContent={(props) => <SideMenu {...props} />}>
      <Drawer.Screen name="main" component={Logged} options={{ headerShown: false }}/>
    </Drawer.Navigator>
  );
};

export default Navigation;

帮助我,我是初学者!
因为谢谢!
埃迪

react-native react-native-navigation
© www.soinside.com 2019 - 2024. All rights reserved.