React Native में नेविगेशन के साथ काम करते समय त्रुटियों को कैसे हैंडल करें

समस्या: React Native में नेविगेशन के साथ काम करते समय त्रुटि "A navigator can only contain 'Screen' components as its direct children" को कैसे हैंडल करें?

समाधान

अपने ऐप पर काम करते समय आपको ऊपर बताए गए जैसे मुद्दों का सामना करना पड़ सकता है। यहां समझेंगे कि ऐसी त्रुटि क्यों आती है और इससे बचने के लिए क्या किया जा सकता है।

यहां वह कोड है जो हमें त्रुटि देता है:

उदाहरण

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';
const Stack = createStackNavigator();
const HomePage = ({ navigation }) => {
    return (
         navigation.navigate('About',
            { name: 'About Page' })}/>
    );
};
const AboutPage = () => {
    return You have reached inside About Page!;
};
const MyStack = () => {
    return (
        
            
                
                
            
        
    );
};
export default MyStack;

कंपाइल करते समय आपके कमांड प्रॉम्प्ट में प्रदर्शित त्रुटि इस प्रकार है:

आपके फोन स्क्रीन पर त्रुटि का प्रदर्शन इस प्रकार है:

त्रुटि के कारण - A navigator can only contain 'Screen' components as its direct children

त्रुटि का पहला कारण खराब इंडेंटेशन है। यह बहुत आवश्यक है कि प्रत्येक कंपोनेंट ठीक से इंडेंटेड हो। चाइल्ड एलिमेंट्स पैरेंट कंपोनेंट के अंदर ठीक से इंडेंटेड हैं।

दूसरा मामला प्रत्येक कंपोनेंट के अंत में छोड़े गए स्पेस के कारण है। स्क्रीन के अंत से स्पेस हटाएं और फिर से कंपाइल करें। यह ठीक काम करेगा। किसी अन्य स्रोत से कोड कॉपी-पेस्ट करते समय सावधान रहें। आप ज्यादातर उन मामलों में इस त्रुटि का सामना करेंगे।

आइए अब उपरोक्त कोड को इंडेंट करें और यदि कोई स्पेस है तो उसे भी हटा दें। यहां आउटपुट के साथ अंतिम कोड है।

उदाहरण

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import { Button, View, Alert, Text } from 'react-native';
const Stack = createStackNavigator();
const HomePage = ({ navigation }) => {
    return (
         navigation.navigate('About',
            { name: 'About Page' })}/>
    );
};
const AboutPage = () => {
    return You have reached inside About Page!;
};
const MyStack = () => {
    return (
        
            
                
                
            
        
    );
};
export default MyStack;