Cách xử lý điều hướng trong React Native với điều hướng phản ứng 5

React-navigation là thư viện điều hướng xuất hiện trong đầu tôi khi chúng ta nói về điều hướng trong React Native.

Tôi là một fan hâm mộ lớn của thư viện này và nó luôn là giải pháp đầu tiên tôi sử dụng để xử lý điều hướng trong React Native. Điều này một phần là do nó có một API tuyệt vời và dễ dàng và rất dễ tùy chỉnh.

Tôi đang viết bài này vì phiên bản 5 vừa mới chuyển từ bản beta sang ổn định. Nó đi kèm với một số thay đổi về tính năng và thiết kế API mới cung cấp một cách đơn giản và khác biệt để khai báo các tuyến.

Trong bài viết này, chúng ta sẽ đi qua các API mới và xem xét các cách sử dụng chúng trong các ứng dụng của mình.

Ban đầu được xuất bản trên saidhayani.com

Đang cài đặt

Cách bạn cài đặt điều hướng phản ứng đã thay đổi một chút so với các phiên bản trước (> 4.x):

// > 4.x verions yarn add react-navigation

Cài đặt react-navigation 5 sẽ giống như sau:

// yarn yarn add @react-navigation/native // npm npm install @react-navigation/native

Các phiên bản mới nhất của điều hướng phản ứng sử dụng nhiều thư viện của bên thứ ba như trình xử lý cử chỉ phản ứng để tạo hoạt ảnh và xử lý chuyển tiếp. Vì vậy, bạn luôn cần phải cài đặt các thư viện đó.

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

Màn hình động

API mới giới thiệu tính năng động trong việc khởi tạo các tuyến. Trước đây, nó được thực hiện tĩnh - về cơ bản, chúng ta phải xác định các Routes của mình trong một tệp cấu hình.

// @flow import React from "react"; import { createAppContainer, createSwitchNavigator } from "react-navigation"; import { createStackNavigator } from "react-navigation-stack"; /** ---------Screens----------- */ // import LaunchScreen from "../Containers/LaunchScreen"; import HomeScreen from "../Containers/HomeScreen"; import ProfileScreen from "../Containers/ProfileScreen"; import LoginScreen from "../Containers/LoginScreen"; const StackNavigator = createStackNavigator( { initialRouteName: "Home" }, { Home: { screen: HomeScreen }, Login: { screen: LoginScreen, headerMode: "none", }, Profile: { screen: ProfileScreen } ); export default createAppContainer(StackNavigator);

API mới đi kèm với các thành phần động. và làm cho điều hướng trở nên năng động hơn.

Cách mới để khai báo Routes sẽ giống như sau.

import React from "react" import { SafeAreaView, StyleSheet, View, Text, StatusBar } from "react-native" import { NavigationContainer } from "@react-navigation/native" import { createStackNavigator } from "@react-navigation/stack" const App: () => React$Node = () => { return (       ) } const Stack = createStackNavigator() const AppNavigation = () => { return (      ) } const HomeScreen = () => { return (  Home Screen  ) }

react-navigation5-demo

Cách mới này năng động, đơn giản hơn để sử dụng và tương tự như API bộ định tuyến phản ứng.

Tùy chọn động

Đây là tính năng được cộng đồng yêu cầu nhiều nhất trong một thời gian dài. Tôi luôn gặp vấn đề với phương thức cũ (tĩnh) và thực sự khó thay đổi hành vi điều hướng động.

Phương pháp cũ => <4.x

Với các phiên bản cũ hơn của điều hướng phản ứng, chúng tôi phải xác định các tùy chọn tĩnh. Và không có cách nào để thay đổi điều này một cách linh hoạt.

 static navigationOptions = { title: "Sign In", header: null, mode: "modal", headerMode: "none" };

Phương pháp mới (phiên bản 5)

React-navigation đi kèm với một phương thức động khá đơn giản. Chúng tôi có thể đặt các tùy chọn cho bất kỳ màn hình nào chỉ bằng cách sử dụng props.

const AppNavigation = ({}) => { let auth = { authenticated: true, user: { email: "[email protected]", username: "John", }, } let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile" return (        ) }

phản ứng-điều hướng-tiêu đề

Với các tùy chọn động, tôi có thể thay đổi tiêu đề dựa trên xác thực. Ví dụ: nếu người dùng được xác thực, tôi có thể đặt tiêu đề màn hình là tên người dùng của người dùng hoặc tôi có thể thay đổi màu nền cho tiêu đề.

Điều này hữu ích hơn, đặc biệt nếu bạn đang sử dụng các chủ đề động hoặc nếu bạn sẵn sàng triển khai chế độ tối trong ứng dụng của mình.

Móc

Đây là tính năng yêu thích của tôi cho đến nay và nó tiết kiệm thời gian. API mới đã giới thiệu một số móc tùy chỉnh để thực hiện các hành động nhất định.

Trong các phiên bản trước, ví dụ: nếu tôi phải lấy Tên hiện tại của màn hình đang hoạt động, tôi phải tạo một số trợ giúp để làm điều đó cho tôi khá giống như sau.

export function getCurrentRouteName(): string | null { const tag = "[getCurrentRouteNameSync] " const navState = getStore().getState().nav const currentRoute = getActiveRouteState(navState) console.log(tag + " currentRoute > ", currentRoute) return currentRoute && currentRoute.routeName ? currentRoute.routeName : null }

API hooks giúp tôi tránh tất cả những điều này và giúp tôi truy cập API điều hướng dễ dàng hơn với một dòng duy nhất sử dụng hook.

Bây giờ tôi có thể dễ dàng lấy RouteName bằng useRouteHook.

import { useRoute } from "@react-navigation/native" const AboutScreen = ({ navigation }) => { const route = useRoute() return (  {/* Display the RouteName here */} {route.name}  ) }

Chúng ta có thể làm điều tương tự với useNavigationStateHook. Nó cho phép chúng tôi truy cập vào trạng thái điều hướng.

const navigationState = useNavigationState(state => state) let index = navigationState.index let routes = navigationState.routes.length console.log(index) console.log(routes)

React-navigation cũng cung cấp các hook khác, ví dụ:

  • useFocuseEffect : một móc hiệu ứng phụ, khi các màn hình được tải, sẽ trả về màn hình được lấy nét
  • useLinking: xử lý deepLinking

Tôi thực sự khuyên bạn nên kiểm tra chúng.

Kết thúc

API điều hướng phản ứng mới chắc chắn chuyển từ tĩnh sang động. Đó là một hướng đi tuyệt vời sẽ thay đổi hoàn toàn cách chúng ta xử lý điều hướng trong React Native. Các tuyến đường động là yêu cầu chính của người dùng điều hướng phản ứng và cách mới này sẽ giúp chúng tôi tạo ra trải nghiệm điều hướng người dùng tốt hơn.

Bạn có thể tìm thêm nội dung về React Native tại đây

Cảm ơn vì đã đọc

  • Twitter
  • GitHub
  • Tham gia danh sách thư
Tìm kiếm một nhà phát triển React Native cho dự án của bạn? Đánh tôi đi .