앱에서 작업하는 동안 한 화면에서 다른 화면으로 전환하고 싶습니다. 이는 반응 탐색에 의해 처리됩니다.
페이지 탐색 작업을 하려면 다음과 같이 몇 가지 패키지를 설치해야 합니다. −
npm install @react-navigation/native @react-navigation/stacknpm 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를 만듭니다.
페이지/HomePage.js
import * as React from 'react';import { Button, View, Alert, Text } from 'react-native';const HomeScreen =({ navigation }) => { return (홈 페이지에서 제목이 Click Here인 버튼을 표시하려고 합니다. 버튼을 클릭하면 사용자가 AboutPage 화면으로 이동합니다.
어바웃페이지의 내용은 다음과 같습니다 -
페이지/AboutPage.js
import * as React from 'react';import { Button, View, Alert, Text } from 'react-native';const AboutPage =() => { return정보 페이지 내부에 도달했습니다!;};기본 AboutPage 내보내기; 정보 페이지에서는 위와 같이 텍스트를 표시하고 있습니다.
이제 다음과 같이 App.js의 페이지를 호출해 보겠습니다. -
페이지는 다음과 같이 호출됩니다 -
'./pages/HomePage'에서 홈페이지 가져오기, './pages/AboutPage'에서 AboutPage 가져오기,또한 @react-navigation/native에서 NavigationContainer를 가져와야 탐색 컨테이너 역할을 합니다. @react-navigation/stack에서 createStackNavigator를 추가합니다.
아래와 같이 createStackNavigator()를 호출합니다 -
const 스택 =createStackNavigator();이제
를 상위 컨테이너로 사용하여 이 스택에 페이지를 추가할 수 있습니다. Stack.Navigation을 사용하면 새 화면이 스택 맨 위에 배치되는 화면 간에 앱을 전환할 수 있습니다. HomePage 화면용 스택을 생성하려면 다음과 같이 하십시오 -
AboutPage 화면용 스택을 생성하려면 다음과 같이 하십시오 -
다음은 React Native의 Navigation Screen에 도움이 되는 전체 코드입니다. -
* 'react'에서 React로 가져오기; '@react-navigation/native'에서 { NavigationContainer } 가져오기, '@react-navigation/stack'에서 { createStackNavigator } 가져오기;import AboutPage from './pages/AboutPage';const Stack =createStackNavigator();const MyStack =() => { return ();};기본값 내보내기 마이스택;