Những thay đổi chính trong react navigation v6:

React navigation v6 vẫn sẽ giữ lại hầu hết các core APIs từ version 5. Chúng ta hãy cùng đi qua những thay đổi mới trong v6 nhé.

I. Những điểm mới

1. Navigators linh hoạt hơn
Bây giờ Navigators cho phép chúng ta customize nhiều options như là 1 props. Có nghĩa là chúng ta sẽ không thể tùy chỉnh chúng dựa trên active screen. Để có thể sử dụng, chúng ta cần chuyển các props này sang các option mà ta có thể điều chỉnh và thêm vào các Screen.
Trong React Navigation 6, nhiều props được coi như là những options cho screen. Những thay đổi đáng kể nhất là tabBarOptions và drawContentOptions, bây giờ ta có thể dùng chúng như 1 options. Ví dụ:

// Bản cũ (v5)
<Tab.Navigator
  tabBarOptions={{
    inactiveTintColor: 'rgba(255, 255, 255, 0.5)',
    activeTintColor: '#fff',
    style: {
      position: 'absolute',
      borderTopColor: 'rgba(0, 0, 0, .2)',
    },
  }}
>

// Mới (v6)
<Tab.Navigator
  screenOptions={{
    tabBarInactiveTintColor: 'rgba(255, 255, 255, 0.5)',
    tabBarActiveTintColor: '#fff',
    tabBarStyle: {
      position: 'absolute',
      borderTopColor: 'rgba(0, 0, 0, .2)',
    },
  }}
>

Xem những deprecations để biết thêm chi tiết

2. Thư viện elements
Đội ngũ phát triển đã extract một số components và helpers để được sử dụng trên navigators khác nhau trong React Navigation và published chúng dưới một package có tên là @react-navigation / Elements. Nó có thể hữu ích nếu chúng ta đang build một navigator của riêng mình hoặc chỉ muốn sử dụng lại các compoenent trong app.

Hiện tại thư viện chỉ mới export một số components, nhưng sẽ tiếp tục nhiều hơn nữa trong tương lai.

3. Đơn giản hoá các APIs cho các functional hiện có
Hiện nay nhiều API đã đơn giản hóa trên React Navigation 6 để giải quyết các trường hợp sử dụng phổ biến. Ví dụ:

Tuỳ chọn đơn để sử dụng modal presentation style và transparent modal với presentation
Custom lại header không phải require settingheaderMode="screen một cách thủ công nữa
Hook useHeaderHeight hiện tại sẽ bỏ qua những header ẩn và returns về chiều cao của tiêu đề hiển thị gần nhất trong trang gốc
Tuỳ chọn mới cho việc custom background (chẳng hạn như BlurView) cho thanh tab bar mà không cần phải sử dụng custome tab bar
API mới để quản lý ref trên container (createNavigationContainerRef and useNavigationContainerRef)

4. Group component mới cho việc tổ chức
Group component giúp ta tổ chức screens bên trong navigators và chia sẻ các screenOptions giữa các Groups. Truyền screenOptions cho một group sẽ config tất cả các screen trong group đó để sử dụng các options này. Chúng ta cũng có thể ghi đè Group options bằng việc truyền options vào mỗi Screen component, tương tự như cách ta làm với screenOptions trên Navigator. Chúng ta đồng thời cũng có thể nối Group components bên trong một Group components khác. Nó rất nhẹ và không render bất kỳ thứ gì, nó tựa như fragments, vì vậy nó sẽ không ảnh hưởng performance.

Trong đoạn code dưới đây, bạn có thể thấy mình group các screen thông thường dưới một group và modal screen nằm một group khác:

function App() {
  return (
    <Stack.Navigator>
      <Stack.Group>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Group>
      <Stack.Group screenOptions={{ presentation: 'modal' }}>
        <Stack.Screen
          name="CreatePost"
          component={CreatePostScreen}
        />
      </Stack.Group>
    </Stack.Navigator>
  );
}

5. Header mặc định trong Bottom Tabs và Drawer
Những lập trình viên như chúng ta thường muốn show header cho screens bên trong drawers và bottom tabs. Để làm được việc đó, chúng ta phải lồng stack navigator với header được cung cấp, ngay cả khi nó là một navigator với chỉ một screen. Bây giờ chúng ta có thể show header bên trong screen của drawer và bottom tabs mà không phải lồng vào nữa.

Đội ngũ phát triển cũng đã export Header component trong thư viện elements để ta có thể sử dụng chúng mọi nơi trong các components.

II. Tổng kết

Mặc dù React Navigation 6 không có nhiều thay đổi như React navigation 5. Nhưng vẫn có một số thay đổi mang tính quan trọng. Bạn có thể mix React navigation 5 và React navigation 6 (với một số lưu ý), vì vậy bạn có thể nâng cấp dần packages cũng được.

Xem thêm hướng dẫn về cách update và những thông tin thay đổi chi tiết hơn.

React Navigation v6

I. Những điểm mới

II. Tổng kết