Trong phản ứng điều hướng sự khác biệt giữa routeName và khóa là gì?

Question

Một điều hơi khó hiểu là sự khác biệt giữa tên và khóa tuyến đường và tại sao bạn sẽ sử dụng tên này và tên kia. Và, cách các tên tuyến trùng trùng lặp được xử lý.

https://reactnavigation.org/docs/navigators/navigation-prop

này nói rằng bạn sử dụng routeName để di chuyển đến một màn hình, và rằng key là "một định danh duy nhất sử dụng để sắp xếp các tuyến đường." Điều đó nghĩa là gì?

Có vẻ như tên tuyến đường không phải là duy nhất như được hiển thị trong ví dụ của tôi vì cả tab ngoài và ngăn bên trong đều có cùng tên tuyến. Khi bạn sử dụng các chức năng điều hướng - bạn chuyển tên tuyến đường, đúng không? Nếu vậy nó phân biệt như thế nào giữa các tên tuyến trùng lặp trong các trình điều hướng lồng nhau và khi nào bạn sẽ sử dụng khóa thay thế?

 export TabsNavigator = TabNavigator({ 
      Home: { 
      screen:StackNavigator({ 
       Home: { screen: HomeScreen }, 
      }), 
      }, 
      Profile: { 
      screen: StackNavigator({ 
       Profile: { ProfileScreen }, 
      }), 
      }, 
     }); 

Tài liệu có ví dụ về cách đặt khóa nhưng tôi không thể hiểu được ngữ cảnh đang cố gắng thực hiện hoặc lý do bạn thực hiện nó trong trường hợp sử dụng thực. https://reactnavigation.org/docs/navigators/navigation-prop

import { NavigationActions } from 'react-navigation' 

const setParamsAction = NavigationActions.setParams({ 
    params: {}, // these are the new params that will be merged into the existing route params 
    // The key of the route that should get the new params 
    key: 'screen-123', 
}) 
this.props.navigation.dispatch(setParamsAction) 

Answer 1

Bạn sử dụng tên của một màn hình xác định trong một Navigator (ví dụ StackNavigator) để mở/hiển thị một màn hình. Mỗi màn hình có một định danh duy nhất, đó là chìa khóa. Ví dụ. nếu bạn mở hai màn hình cùng loại, chúng sẽ có cùng tên tuyến, nhưng có một khóa khác.

Với this.props.navigation.dispatch(NavigationActions.setParams(params: {val: 'val'}, key: 'home-1')); bạn có thể cập nhật trạng thái điều hướng của màn hình bằng khóa 'home-1'. Ví dụ. nếu bạn có StackNavigator và màn hình cài đặt ở phía trên cùng của màn hình chính, bạn có thể cập nhật trạng thái điều hướng (this.props.navigation.state.params) của màn hình chính từ màn hình cài đặt.