반응 항법 V2: 항법 간의 차이점푸시 및 네비게이션.이네이블화

반응 항법 V2: 항법 간의 차이점푸시 및 네비게이션.이네이블화

React Native는 처음이고 현재 React Native Navigation Docs를 공부하고 있습니다.궁금했어요.와의 차이는 무엇입니까?navigation.push()그리고.navigation.navigate()?

내가 직접 알아내려고 했지만, 그들은 똑같은 일을 해내는 것 같아...

의 메뉴얼을 참조하면, 그 차이점에 대한 설명이 있습니다.

Push 액션은 스택 상단에 루트를 추가하고 루트로 이동합니다.이는 컴포넌트가 이미 스택에 마운트되어 있는 경우 탐색이 스택의 이전 위치로 팝업된다는 점에서 다릅니다.푸시는 항상 위에 추가되므로 컴포넌트를 여러 번 장착할 수 있습니다.

Instagram을 예로 들 수 있습니다.

사용자의 프로파일로 이동하는 것을 고려해 보십시오.그런 다음 사용자의 팔로워를 확인하고 프로필로 이동할 수 있습니다.에서만 동일한 액션을 수행하는 경우navigate액션 팔로워 리스트 화면에서 사용자의 프로파일을 클릭하면 이전 프로파일로 이동합니다.단,push스택에 새 화면이 푸시되고 올바른 프로파일이 표시됩니다.이렇게 하면goBack첫 화면으로 이동합니다.

여기 마지막 블로그 투고에 따르면 v1의 경우:

navigate(routeName) and push(routeName) were very similar: every time you called navigate(routeName) it would push a new route to the stack.

v2의 경우:

Now navigate(routeName) will first try to find an existing instance of the route and jump to that if it exists, otherwise it will push the route to the stack.

navigate > 페이지인스턴스(존재하는 경우)로 이동합니다.

push > 새로운 인스턴스가 이미 존재하는 경우에도 push한다.

질문에 대답할 수 있을 것 같아요.

홈페이지 1페이지 2페이지 3페이지입니다.

"home"은 "initialRouteName"이고 "page1"과 "page2"는 하위 페이지입니다.

홈에서 시작하여 page1(또는 page1)을 누르면 페이지 스택은 다음과 같습니다.

(2) 페이지1

(1) 자택

페이지2를 세 번 누르면 스택은

(5) 페이지2

(4) 페이지2

(3) 페이지2

(2) 페이지1

(1) 자택

이제 집에 가고 싶어, 할 수 있어요.

1 팝을 4회 또는 직접 팝(4)

2 페이지 1을 탐색한 후 한 번 팝합니다.

3 pop To Top 1회

페이지 스택에 page1이 없는 경우 스택의 맨 위에 push, parames 페이지가 표시되고 페이지가 표시되는 것과 동일하게 동작합니다.

페이지 스택에 페이지 1이 있을 때, 탐색 기능은 스택의 맨 위에 가장 가까운 페이지 1로 점프하고 페이지 1 위에 다른 페이지를 팝하는 것입니다.

예를 들어 다음과 같은 페이지 스택이 있습니다.

(7) 페이지2

(6) 페이지2

(5) 페이지2

(4) 페이지1

(3) 페이지 1

(2) 페이지1

(1) 자택

집으로 돌아가려면 먼저 1페이지를 탐색한 후 3번 팝업을 해야 합니다.

현재 페이지가 페이지 1이고 페이지 1로 이동하면 아무것도 표시되지 않음을 유의하십시오.

일어났다.

여기 제가 작성한 테스트 코드가 있습니다. App.js로 복사해 주세요.

import * as React from 'react';
import { Button, View,Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
 
function HomeScreen({ navigation }) {
  return (
    <View style={{}}>
      <Button
        title="navigate to page1"
        onPress={() => navigation.navigate('page1',{"pageName":"page1"})}
      />
      <Button
        title="push to page1"
        onPress={() => navigation.push('page1',{"pageName":"page1"})}
      />
    </View>
  );
}
 
function Page({route, navigation }) {
 
  return (
    <View style={{}}>
    <Text>{`current page is ${route.name}`}</Text>
       <Button
        title="navigate to Page1"
        onPress={() => navigation.navigate('page1')}
      />
       <Button
        title="push Page1"
        onPress={() => navigation.push('page1')}
      />
        <Button
        title="navigation to Page2"
        onPress={() => navigation.push('page2')}
      />
       <Button
        title="push Page2"
        onPress={() => navigation.push('page2')}
      />
      <Button
        title="Go to HomeScreen"
        onPress={() => navigation.navigate('Home')}
      />
        <Button
        title="pop"
        onPress={() => navigation.pop()}
      />
        <Button
        title="popToTop"
        onPress={() => navigation.popToTop()}
      />
    </View>
  );
}
const Stack = createStackNavigator();
function MyStack() {
  return (
    <Stack.Navigator>
     <Stack.Screen name="Home" component={HomeScreen} />
      <Stack.Screen name="page1" component={Page} />
      <Stack.Screen name="page2" component={Page} />
    </Stack.Navigator>
  );
}
 
export default function App() {
  return (
    <NavigationContainer>
      <MyStack />
    </NavigationContainer>
  );
}

그것이 당신에게 도움이 되기를 바랍니다.

짧고 심플하게 하고 싶었다.

Navigation.navigate는, 만, 「 상태로 합니다」라고 하는 것은, 「」( 「오래된 상태입니다.Navigation.push는 화면이 이전에 방문되었는지, 스택에서 사용할 수 있는지 확인하지 않고 새 화면으로 이동합니다.

언급URL : https://stackoverflow.com/questions/51090135/react-navigation-v2-difference-between-navigation-push-and-navigation-navigate