MMA301 - Chương 5: Điều hướng với React Navigation

Khi sử dụng useIsFocused và useEffect trong một thành phần, chúng ta cần hiểu cách hoạt động của chúng. useIsFocused sẽ trả về một giá trị boolean cho biết thành phần đang được tập trung vào hay không. useEffect sẽ được gọi khi giá trị của useIsFocused thay đổi. Trong ví dụ này, useEffect sẽ được gọi khi thành phần được tập trung vào. Nếu thành phần ban đầu không được tập trung vào và sau đó được tập trung vào, useEffect sẽ được gọi và in ra 'ProfileScreen is now focused'. Điều này xảy ra vì useEffect được gọi khi giá trị của useIsFocused thay đổi, và khi thành phần được tập trung vào, giá trị của useIsFocused sẽ trở thành true. Vì vậy, đáp án đúng là 'It will log 'ProfileScreen is now focused' every time the component gains focus'.

Khi sử dụng hook `useFocusEffect` trong React Navigation, nếu bạn gọi nó bên trong một thành phần chức năng nhưng cung cấp một mảng phụ thuộc rỗng, điều gì sẽ xảy ra? Câu trả lời chính xác là: hiệu ứng sẽ chạy mỗi khi thành phần được tập trung vào và không bị mất tập trung. Điều này xảy ra vì `useFocusEffect` được thiết kế để chạy khi thành phần được tập trung vào và không bị mất tập trung, và nếu không có phụ thuộc nào được cung cấp, nó sẽ chạy mỗi khi thành phần được tập trung vào và không bị mất tập trung.

Để truy cập các tham số của đường dẫn trong một thành phần chức năng trong React Navigation, bạn nên sử dụng hook 'useRoute'. Hook này cho phép bạn truy cập vào các tham số của đường dẫn hiện tại và sử dụng chúng trong thành phần của bạn. Ví dụ, nếu bạn có một đường dẫn như '/users/:id', bạn có thể sử dụng 'useRoute' để truy cập vào tham số ':id' và sử dụng nó để tải dữ liệu người dùng từ cơ sở dữ liệu. Điều này giúp bạn có thể xây dựng các ứng dụng di động phức tạp và linh hoạt hơn.

Để thực hiện một hành động chỉ khi màn hình đầu tiên được mount trong React Navigation, bạn có thể sử dụng hook nào sau đây?

Để có thể truy cập vào đối tượng navigation trong một thành phần chức năng trong React Navigation, bạn cần sử dụng một trong các hook sau. Tuy nhiên, hook phù hợp nhất trong trường hợp này là "useNavigation". Hook này cho phép bạn truy cập vào đối tượng navigation và sử dụng các phương thức của nó để điều hướng giữa các màn hình. Ví dụ, bạn có thể sử dụng phương thức navigate để chuyển sang màn hình khác hoặc sử dụng phương thức goBack để trở về màn hình trước đó. Ngoài ra, bạn cũng có thể sử dụng phương thức replace để thay thế màn hình hiện tại bằng màn hình khác. Tóm lại, "useNavigation" là hook phù hợp nhất để truy cập vào đối tượng navigation trong một thành phần chức năng trong React Navigation.

Để lấy tên của đường dẫn hiện tại sử dụng hooks trong React Navigation, bạn có thể sử dụng hàm `useRoute()` từ thư viện React Navigation. Hàm này sẽ trả về đối tượng hiện tại của đường dẫn, và bạn có thể lấy tên của nó bằng cách sử dụng thuộc tính `name`. Ví dụ, bạn có thể sử dụng mã sau để lấy tên của đường dẫn hiện tại: `const route = useRoute(); const routeName = route.name;` Hàm `useRoute()` sẽ trả về đối tượng hiện tại của đường dẫn, và bạn có thể lấy tên của nó bằng cách sử dụng thuộc tính `name`. Điều này giúp bạn có thể dễ dàng lấy tên của đường dẫn hiện tại trong ứng dụng của mình.

Component được sử dụng để di chuyển giữa các màn hình khác nhau là gì? Trong React Navigation, có một số loại navigation khác nhau, nhưng StackNavigator là một trong những phổ biến nhất. Nó cho phép bạn tạo một chồng màn hình, nơi mỗi màn hình được thêm vào chồng khi người dùng chuyển sang màn hình mới. Điều này cho phép người dùng quay lại các màn hình trước đó bằng cách nhấn nút quay lại. StackNavigator cũng cho phép bạn định nghĩa các màn hình và các hành động khi người dùng chuyển sang màn hình mới.

React Navigation cung cấp một số loại trình điều hướng chính, bao gồm Tab Navigator, Drawer Navigator và Stack Navigator. Mỗi loại trình điều hướng này đều có mục đích và cách sử dụng riêng. Tab Navigator thường được sử dụng để tạo giao diện tab, giúp người dùng dễ dàng chuyển đổi giữa các màn hình khác nhau. Drawer Navigator thường được sử dụng để tạo giao diện menu kéo, giúp người dùng dễ dàng truy cập vào các chức năng khác nhau. Stack Navigator thường được sử dụng để tạo giao diện màn hình chồng lên nhau, giúp người dùng dễ dàng chuyển đổi giữa các màn hình khác nhau. Switch Navigator không phải là một loại trình điều hướng chính được cung cấp bởi React Navigation. Thay vào đó, nó thường được sử dụng để tạo giao diện chuyển đổi giữa các màn hình khác nhau, nhưng nó không phải là một phần của bộ công cụ trình điều hướng chính của React Navigation.

Khi sử dụng useNavigationState, bạn có thể truy cập thông tin về trạng thái hiện tại của ứng dụng. Trong trường hợp này, bạn đang sử dụng hàm state => state.routes[state.index].name để lấy tên của tuyến đường hiện tại. Tuyến đường hiện tại được xác định bởi index, đó là vị trí của tuyến đường trong mảng routes. Vì vậy, currentRoute sẽ chứa tên của tuyến đường hiện tại.

Khi sử dụng hàm `useIsFocused` trong React Native Navigation, chúng ta có thể theo dõi xem màn hình hiện tại có đang được tập trung hay không. Trong ví dụ trên, chúng ta có một hàm `HomeScreen` sử dụng `useIsFocused` để kiểm tra xem màn hình đang được tập trung hay không. Hàm `useEffect` được sử dụng để thực hiện hành động khi màn hình được tập trung hoặc mất tập trung. Nếu màn hình được tập trung, sẽ in ra 'HomeScreen is focused' vào console, còn nếu mất tập trung, sẽ in ra 'HomeScreen is not focused'. Khi component được khởi tạo và ban đầu được tập trung, sẽ in ra 'HomeScreen is focused'. Sau đó, khi màn hình mất tập trung, sẽ in ra 'HomeScreen is not focused'. Vì vậy, kết quả sẽ là 'HomeScreen is focused' ban đầu, sau đó là 'HomeScreen is not focused'.

Khi sử dụng hook `useIsFocused`, chúng ta có thể kiểm tra xem một thành phần có đang được tập trung hay không. Trong ví dụ này, chúng ta có một thành phần `HomeScreen` và muốn biết khi nào thành phần này được tập trung và khi nào không. Nếu thành phần được tập trung ban đầu và sau đó mất tập trung, thì log sẽ ghi lại hai dòng: 'HomeScreen is focused' (thành phần HomeScreen đang được tập trung) và 'HomeScreen is not focused' (thành phần HomeScreen không còn được tập trung). Điều này cho phép chúng ta theo dõi trạng thái tập trung của thành phần trong suốt quá trình chạy ứng dụng.

DrawerLayoutAndroid là một thành phần trong React Native giúp tạo giao diện drawer cho ứng dụng. Để hiển thị nội dung của drawer, bạn cần sử dụng prop renderNavigationView, đây là một hàm có thể được sử dụng để render nội dung của drawer. Vị trí xuất hiện của drawer (ví dụ từ bên trái hoặc bên phải màn hình) được xác định bởi prop drawerPosition. Điều này cho phép bạn dễ dàng tùy chỉnh vị trí của drawer dựa trên nhu cầu của ứng dụng. Ngoài ra, nội dung chính của ứng dụng được đặt trong navigationView prop thay vì là một thành phần con trực tiếp của DrawerLayoutAndroid. Điều này giúp bạn dễ dàng quản lý và tùy chỉnh nội dung của ứng dụng.

Để render giao diện navigation bên trong DrawerLayoutAndroid, bạn cần sử dụng một trong các thuộc tính sau: drawerWidth, renderNavigationView, drawerContent, renderDrawer. Trong đó, thuộc tính renderNavigationView là lựa chọn đúng. Nó cho phép bạn render giao diện navigation bên trong DrawerLayoutAndroid. Ví dụ, bạn có thể sử dụng thuộc tính này để render một NavigationView từ thư viện AndroidX.