วิธีจัดการกับการนำทางจากหน้าหนึ่งไปยังอีกหน้าในเนทีฟแบบโต้ตอบ?

ขณะทำงานกับแอป เราต้องการเปลี่ยนจากหน้าจอหนึ่งไปอีกหน้าจอหนึ่ง ซึ่งจัดการโดยการนำทางแบบตอบสนอง

ในการทำงานบนการนำทางเพจ เราจำเป็นต้องติดตั้งแพ็คเกจสองสามตัวดังนี้ −

npm install @react-navigation/native @react-navigation/stack
npm install @react-native-community/masked-view react-native-screens react-native-safe-area-context react-native-gesture-handler

เมื่อคุณทำการติดตั้งข้างต้นเสร็จแล้ว ให้เราดำเนินการตั้งค่าการนำทางครั้งต่อไปในภาษาเนทีฟแบบโต้ตอบ

ในโปรเจ็กต์แอปของคุณ ให้สร้างโฟลเดอร์ชื่อ pages/ . สร้างไฟล์ js 2 ไฟล์ HomePage.js และ AboutPage.js

pages/HomePage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const HomeScreen = ({ navigation }) => {
   return (
      <Button title="Click Here" onPress={() => navigation.navigate('About', { name: 'About Page' })}/>
   );
};
export default HomeScreen;

ในหน้าแรก เราต้องการแสดงปุ่มที่มีชื่อเรื่องเป็น คลิกที่นี่ เมื่อคลิกปุ่ม ผู้ใช้จะไปยังหน้าจอ AboutPage

รายละเอียดของ AboutPage มีดังต่อไปนี้ -

หน้า/AboutPage.js

import * as React from 'react';
import { Button, View, Alert, Text } from 'react-native';
const AboutPage = () => {
   return <Text>You have reached inside About Page!</Text>;
};
export default AboutPage;

ในหน้า About เราก็แค่แสดงข้อความตามที่แสดงด้านบนนี้

ตอนนี้ให้เราเรียกเพจใน App.js ดังนี้ -

หน้าจะถูกเรียกดังนี้ −

import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';

นอกจากนี้ เราจำเป็นต้องนำเข้า NavigationContainer จาก @react-navigation/native จะทำหน้าที่เป็นคอนเทนเนอร์การนำทาง เพิ่ม createStackNavigator จาก @react-navigation/stack

ทำการเรียก createStackNavigator() ดังที่แสดงด้านล่าง -

const Stack = createStackNavigator();

ตอนนี้คุณสามารถเพิ่มเพจใน Stack นี้ได้โดยใช้ เป็นคอนเทนเนอร์หลัก Stack.Navigation ช่วยให้แอปของคุณเปลี่ยนระหว่างหน้าจอโดยวางหน้าจอใหม่แต่ละหน้าจอไว้บนสแต็ก

<NavigationContainer><Stack.Navigator><Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} /><Stack.Screen name="About" component={AboutPage} />
</Stack.Navigator></NavigationContainer>

ในการสร้างหน้าจอ Stack สำหรับ HomePage ให้ทำดังนี้ -

<Stack.Screen name="Home" component={HomePage} options={{ title: 'From home page : Navigation' }} />

ในการสร้างหน้าจอ Stack สำหรับ AboutPage ทำได้ดังนี้ -

<Stack.Screen name="About" component={AboutPage} />

นี่คือรหัสเต็มที่ช่วยในหน้าจอการนำทางใน React Native -

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomePage from './pages/HomePage';
import AboutPage from './pages/AboutPage';
const Stack = createStackNavigator();
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;