React Native의 네비게이터에 대해 알아보세요.

이 튜토리얼에서는 반응 네이티브 앱에 네비게이터를 추가하는 방법에 대해 설명합니다.

내비게이션은 모든 모바일 앱의 필수 부분이며 반응 네이티브에서는 React.js의 react-navigation와 정확히 유사한 react-router-dom 패키지로 쉽게 구현할 수 있습니다.

좋아, 시작하자. 먼저 탐색과 관련된 모든 필수 npm 패키지를 설치합니다.

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

반응 네이티브 앱에 이러한 npm 패키지를 설치한 후 기본 app.js에 아래 코드를 추가하여 반응 네이티브 앱에서 스택 내비게이터를 사용합니다.

다음과 같은 다양한 유형의 네비게이터가 있습니다.

스택 내비게이터

서랍 네비게이터

앱 하단의 네비게이터

이 포스트에서는 스택 네비게이터를 사용할 것입니다.

스택 내비게이터는 휴대폰에서 가장 널리 사용되는 내비게이터 유형입니다.

LIFO(Last in First out) 개념과 같은 것을 포함하는 스택 방식을 통해 작동합니다.

import React from 'react';
import 'react-native-gesture-handler';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Home from './Components/Home'
import Map from './Components/Map'

const Stack = createStackNavigator();

const App = ()=> {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen options={{ title: 'Neo Budget' }} 
          name="Home" component={Home} />
         <Stack.Screen name="Map" component={Map} />

      </Stack.Navigator>
    </NavigationContainer>
  );

}

export default App;

다음은 그 작업 예입니다.



먼저 모든 npm 패키지를 가져오고 상위 탐색 컨테이너로 스택 탐색기를 래핑합니다.

그런 다음 반응 라우터에서와 마찬가지로 스택 탐색기를 사용합니다.

구성 요소를 스택 화면으로 설정하여 탐색 소품을 사용할 때 네비게이터가 해당 구성 요소를 찾도록 지시하고 옵션 소품으로 앱 제목을 설정합니다.

이제 여기서 가장 큰 장점은 스택 탐색기를 사용하여 다른 구성 요소에 소품을 보낼 수 있다는 것입니다.

import React,{useState,useEffect} from 'react';
import {Text,View,Button} from 'react-native'
const Main = ({navigation}) => {
return(
<View>
 <Button onPress={() => navigation.navigate('Home',{data:item})} title="Go to Data"></Button>
</View>
)}

그런 다음 아래와 같이 반응하는 것처럼 다른 구성 요소의 소품에 액세스할 수 있습니다.

import React,{useState,useEffect} from 'react';
import {Text,View} from 'react-native'
const Home = ({route}) => {

 return (
        <View>
         <Text>{route.params.data}</Text>
        </View>
}

export default Home;

이것이 바로 모바일 앱에 스택 탐색기를 통합하고 한 페이지에서 다른 페이지로 데이터를 전달할 수 있는 방법입니다.

네비게이터 사용의 계층 구조를 기억하십시오.

app.js의 모든 패키지를 가져오고 반응 라우터처럼 래핑합니다.

그런 다음 간단한 구성 요소처럼 사용하고 데이터를 보낼 수 있습니다.navigation.navigate를 다른 구성 요소에 연결하고 route.params.variable로 해당 데이터를 포착합니다.

여기에서 네비게이터의 표면을 긁었으며 다음 게시물에서는 네비게이터의 스타일을 지정하고 버튼을 추가하고 사용에 대해 논의할 것입니다.

goBack()

푸시()

스택 내비게이터의 pop() 및 모바일 앱의 모든 상위 회사에서 사용 중인 서랍 내비게이터에 대해 논의 중입니다.

또한 데이터를 모바일에 저장하는 데 사용되며 브라우저에서 로컬 저장소의 정확한 사본인 Async-storage를 사용할 것입니다.

계속 지켜봐 주세요.

읽어 주셔서 감사합니다!!

내 포트폴리오 확인: Gautham's portfolio

내 블로그 확인: coding-magnified.tech

예산 책정에 대한 React 프로젝트 확인: neo-budget

내 다른 기사:

.

.