ReactNative এ নেভিগেশনের সাথে কাজ করার সময় কীভাবে ত্রুটিগুলি পরিচালনা করবেন?

সমস্যা:ন্যাভিগেশন ইন রিঅ্যাক্টনেটিভের সাথে কাজ করার সময় "একটি নেভিগেটর শুধুমাত্র 'স্ক্রিন' উপাদানগুলিকে তার সরাসরি সন্তান হিসাবে ধারণ করতে পারে" ত্রুটিটি কীভাবে পরিচালনা করবেন?

সমাধান

আপনার অ্যাপে কাজ করার সময় আপনি উপরে বর্ণিত সমস্যার সম্মুখীন হতে পারেন। কেন এই ধরনের ত্রুটি আসে এবং এটি এড়াতে কী করা যেতে পারে তা এখানে বোঝা যাবে।

এখানে কোড যা আমাদের ত্রুটি দেয় −

উদাহরণ

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 (
      <Button title="Click Here" onPress={() => navigation.navigate('About',
      { name: 'About Page' })}/>
   );
};
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
   return (
      <NavigationContainer>
         <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{ title: 'From home page : Navigation' }}
               />
            <Stack.Screen name="About" component={AboutPage} />
         </Stack.Navigator>
      </NavigationContainer>
   );
};
export default MyStack;

−

আপনার ফোনের স্ক্রিনে ত্রুটির প্রদর্শন নিম্নরূপ -

ত্রুটির কারণ − একটি নেভিগেটর শুধুমাত্র 'স্ক্রিন' উপাদানগুলিকে সরাসরি সন্তান হিসেবে ধারণ করতে পারে

ত্রুটির প্রথম কারণ হল খারাপ ইন্ডেন্টেশন। এটা খুবই প্রয়োজনীয় যে প্রতিটি উপাদান সঠিকভাবে ইন্ডেন্ট করা হয়। শিশু উপাদানগুলি পিতামাতার উপাদানের ভিতরে সঠিকভাবে ইন্ডেন্ট করা হয়৷

দ্বিতীয় ক্ষেত্রে প্রতিটি উপাদানের শেষে ফাঁকা ফাঁকা থাকার কারণে। স্ক্রিনের শেষ থেকে স্পেসগুলি সরান এবং আবার কম্পাইল করুন। এটা ঠিক কাজ করবে. অন্য উৎস থেকে কোড কপি পেস্ট করার সময় সতর্কতা অবলম্বন করুন. আপনি বেশিরভাগ ক্ষেত্রেই এই ত্রুটির সম্মুখীন হবেন।

আসুন এখন উপরের কোড ইন্ডেন্ট করি এবং স্পেস থাকলে মুছে ফেলি। এখানে আউটপুট সহ চূড়ান্ত কোড আছে।

উদাহরণ

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 (
      <Button title="Click Here" onPress={() => navigation.navigate('About',
      { name: 'About Page' })}/>
   );
};
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
const MyStack = () => {
   return (
      <NavigationContainer>
         <Stack.Navigator>
            <Stack.Screen
               name="Home"
               component={HomePage}
               options={{ title: 'From home page : Navigation' }}
               />
            <Stack.Screen name="About" component={AboutPage} />
         </Stack.Navigator>
      </NavigationContainer>
   );
};
export default MyStack;