Làm thế nào để xử lý điều hướng từ trang này sang trang khác trong phản ứng gốc?

Trong khi làm việc trên ứng dụng, chúng tôi muốn chuyển từ màn hình này sang màn hình khác và điều đó được xử lý bằng điều hướng phản ứng.

Để làm việc trên các trang điều hướng, chúng tôi cần cài đặt một số gói như sau -

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

Khi bạn đã hoàn tất quá trình cài đặt ở trên, bây giờ chúng ta hãy tiến hành thiết lập điều hướng tiếp theo trong react native.

Trong dự án ứng dụng của bạn, hãy tạo một thư mục có tên là các trang /. Tạo 2 tệp js HomePage.js và AboutPage.js.

trang / 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;

Trong trang chủ, chúng tôi muốn hiển thị một nút có tiêu đề là Nhấp vào đây. Nhấp vào nút, người dùng sẽ điều hướng đến màn hình AboutPage.

Chi tiết của AboutPage như sau -

trang / 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;

Trong trang giới thiệu, chúng tôi chỉ hiển thị văn bản như được hiển thị ở trên.

Bây giờ chúng ta hãy gọi các trang trong App.js như sau -

Các trang được gọi như sau -

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

Ngoài ra, chúng ta cần nhập NavigationContainer từ @ react-navigation / native sẽ hoạt động như một vùng chứa điều hướng. Thêm createStackNavigator từ @ react-navigation / stack.

Thực hiện cuộc gọi tới createStackNavigator () như hình dưới đây -

const Stack = createStackNavigator();

Bây giờ bạn có thể thêm các trang vào Ngăn xếp này bằng cách sử dụng làm vùng chứa mẹ. Stack.Navigation giúp ứng dụng của bạn chuyển đổi giữa các màn hình trong đó mỗi màn hình mới được đặt trên đầu ngăn xếp.

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

Để tạo Ngăn xếp cho màn hình Trang chủ, thực hiện như sau -

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

Để tạo Stack cho màn hình AboutPage, thực hiện như sau -

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

Đây là toàn bộ mã trợ giúp trong Màn hình điều hướng trong 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;