Bagaimana untuk mengendalikan navigasi dari satu halaman ke halaman lain dalam React Native?

Semasa membangunkan apl, kami ingin menukar dari satu skrin ke skrin lain dan ini dikendalikan melalui navigasi tindak balas.

Untuk bekerja pada halaman navigasi, kita perlu memasang beberapa pakej seperti yang ditunjukkan di bawah - p>

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

Selepas melengkapkan pemasangan di atas, sekarang mari kita beralih ke persediaan navigasi seterusnya dalam React Native.

Buat folder bernama Pages/ dalam projek aplikasi anda. Cipta 2 fail js HomePage.js dan 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(&#39;About&#39;, { name: &#39;About Page&#39; })}/>
   );
};
export default HomeScreen;

Di halaman utama, kami ingin memaparkan butang bertajuk "Klik Di Sini". Mengklik butang ini akan menavigasi pengguna ke skrin AboutPage. Butiran

AboutPage adalah seperti berikut -

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

Dalam halaman About kami hanya memaparkan teks seperti yang ditunjukkan di atas.

Sekarang mari kita panggil halaman dalam App.js seperti berikut -

Halaman itu dipanggil seperti berikut -

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

Selain itu, kita perlu mengimport NavigationContainer daripada @react-navigation/native yang akan bertindak sebagai bekas navigasi. Tambah createStackNavigator daripada @react-navigation/stack.

Panggil createStackNavigator() seperti yang ditunjukkan di bawah -

const Stack = createStackNavigator();

Kini anda boleh menambah halaman pada tindanan ini menggunakan sebagai bekas induk. Stack.Navigation membantu apl anda beralih antara skrin, dengan setiap skrin baharu diletakkan di atas tindanan.

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

Untuk membuat tindanan untuk skrin Utama, lakukan seperti berikut -

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

Untuk membuat tindanan untuk skrin AboutPage, lakukan seperti berikut -

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

Berikut ialah kod lengkap yang membantu dalam skrin navigasi dalam 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 (
      <Stack.Screen name="Home" component={HomePage} options={{ title: &#39;From home page : Navigation&#39; }} /><Stack.Screen name="About" component={AboutPage} />
      
   );
};
export default MyStack;

Atas ialah kandungan terperinci Bagaimana untuk mengendalikan navigasi dari satu halaman ke halaman lain dalam React Native?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!