React Native에서 한 페이지에서 다른 페이지로의 탐색을 처리하는 방법은 무엇입니까?

앱을 개발하는 동안 한 화면에서 다른 화면으로 전환하고 싶은데 이는 반응 탐색을 통해 처리됩니다.

네비게이션 페이지 작업을 위해서는 아래와 같이 몇 가지 패키지를 설치해야 합니다. - 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

위 설치를 완료한 후 이제 React Native의 다음 네비게이션 설정으로 넘어가겠습니다.

애플리케이션 프로젝트에 Pages/라는 폴더를 만듭니다. 2개의 js 파일 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(&#39;About&#39;, { name: &#39;About Page&#39; })}/>
   );
};
export default HomeScreen;

홈 페이지에 "여기를 클릭하세요"라는 제목의 버튼을 표시하고 싶습니다. 이 버튼을 클릭하면 사용자가 AboutPage 화면으로 이동합니다.

AboutPage의 세부 사항은 다음과 같습니다. -

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;

About 페이지에서는 위와 같이 텍스트를 표시합니다.

이제 App.js에서 다음과 같이 페이지를 호출해 보겠습니다. -

페이지는 다음과 같이 호출됩니다. -

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

또한 탐색 컨테이너 역할을 할 @react-navigation/native에서 NavigationContainer를 가져와야 합니다. @react-navigation/stack에서 createStackNavigator를 추가하세요.

아래에 표시된 대로 createStackNavigator()를 호출합니다. -

const Stack = createStackNavigator();

이제 를 상위 컨테이너로 사용하여 이 스택에 페이지를 추가할 수 있습니다. Stack.Navigation은 각각의 새로운 화면이 스택 상단에 배치되어 앱이 화면 간 전환하는 데 도움이 됩니다.

<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>

홈 화면용 스택을 만들려면 다음과 같이 하세요. -

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

AboutPage 화면용 스택을 만들려면 다음과 같이 하세요. -

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

React Native의 탐색 화면에 도움이 되는 전체 코드는 다음과 같습니다.

rreee

위 내용은 React Native에서 한 페이지에서 다른 페이지로의 탐색을 처리하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!