React-navigation là thư viện điều hướng đầu tiên tôi nghĩ đến khi nói về điều hướng trong React Native.
Tôi là một fan hâm mộ của thư viện này và nó luôn là giải pháp đầu tiên tôi dùng để xử lý điều hướng trong React Native. Một phần vì nó có một API tuyệt vời và dễ sử dụng, đồng thời rất tùy biến.
Tôi viết bài này vì phiên bản 5 vừa chuyển từ beta sang ổn định. Nó đi kèm với một số thay đổi tính năng và thiết kế API mới cung cấp cách khai báo route đơn giản và khác biệt.
Trong bài viết này, chúng ta sẽ đi qua các API mới và xem cách sử dụng chúng trong ứng dụng của chúng ta.
Được xuất bản ban đầu trên saidhayani.com
Cài đặt
Cách cài đặt react-navigation đã thay đổi một chút so với các phiên bản trước (>4.x):
// > 4.x versions yarn add react-navigation Cài đặt react-navigation 5 sẽ trô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 react-navigation sử dụng nhiều thư viện bên thứ ba như react-native-gesture-handler cho hoạt ảnh và xử lý chuyển tiếp. Vì vậy bạn luôn cần cài đặt những 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 (Dynamic screens)
API mới giới thiệu tính động trong việc khởi tạo route. Trước đây, việc này được thực hiện tĩnh - cơ bản là chúng ta phải định nghĩa các Route trong một file 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 component động. và làm cho điều hướng trở nên động hơn.
Cách mới để khai báo Route sẽ trô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 ( <> <StatusBar barStyle="dark-content" /> <SafeAreaView style={styles.containerStyle}> <AppNavigation /> </SafeAreaView> </> ) } const Stack = createStackNavigator() const AppNavigation = () => { return ( <NavigationContainer> <Stack.Navigator initialRouteName="home"> <Stack.Screen name="home" component={HomeScreen} /> </Stack.Navigator> </NavigationContainer> ) } const HomeScreen = () => { return ( <View style={styles.containerStyle}> <Text style={styles.title}>Home Screen</Text> </View> ) } 
Cách mới này động, đơn giản hơn để sử dụng, và khá giống với API của react-router.
Tùy chọn động (Dynamic options)
Đâ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 pháp cũ (tĩnh) và thật 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ũ của react-navigation, chúng ta phải định nghĩa các tùy chọn tĩnh. Và không có cách nào để thay đổi điều này động.
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 pháp động khá đơn giản. Chúng ta có thể đặt options cho bất kỳ màn hình nào chỉ bằng props.
const AppNavigation = ({}) => { let auth = { authenticated: true, user: { email: "user@mail.com", username: "John", }, } let ProfileScreenTitle = auth.authenticated ? auth.user.username : "Profile" return ( <NavigationContainer> <Stack.Navigator initialRouteName="Home"> <Stack.Screen name="Home" component={HomeScreen} /> <Stack.Screen name="Profile" component={ProfileScreen} options={{ title: ProfileScreenTitle, headerTintColor: "#4aa3ba", headerStyle: { backgroundColor: darkModeOn ? "#000" : "#fff", }, }} /> <Stack.Screen name="About" component={AboutScreen} /> </Stack.Navigator> </NavigationContainer> ) } 
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 đã xác thực, tôi có thể đặt tiêu đề màn hình thành tên người dùng, hoặc thay đổi backgroundColor cho header.
Điều này hữu ích hơn đặc biệt nếu bạn đang sử dụng chủ đề động hoặc muốn triển khai dark mode trong ứng dụng.
Hooks
Đây là tính năng yêu thích nhất của tôi cho đến nay, và nó giúp tiết kiệm thời gian. API mới giới thiệu một số custom hook để 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 currentName của màn hình đang hoạt động, tôi phải tạo một số helper để làm điều đó, 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 thứ này và làm cho việc truy cập Navigation API dễ dàng hơn chỉ 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 hook useRoute.
import { useRoute } from "@react-navigation/native" const AboutScreen = ({ navigation }) => { const route = useRoute() return ( <View style={{ justifyContent: "space-around", flex: 1, alignItems: "center", }} > {/* Hiển thị RouteName ở đây */} <Text style={styles.title}>{route.name}</Text> </View> ) } Chúng ta có thể làm tương tự với hook useNavigationState. Nó cho chúng ta quyền 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 cung cấp các hook khác, ví dụ:
useFocusEffect: một hook side effect mà, khi các màn hình được tải, trả về màn hình đang được focususeLinking: xử lý deep linking
Tôi khuyên bạn nên xem qua chúng.
Kết luận
API react-navigation mới chắc chắn chuyển từ tĩnh sang động. Đây là một hướng đi tuyệt vời sẽ hoàn toàn thay đổi cách chúng ta xử lý điều hướng trong React Native. Route động là yêu cầu chính của người dùng react-navigation, và cách mới này sẽ giúp chúng ta 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 ở đây
Cảm ơn bạn đã đọc
- GitHub
- Tham gia danh sách thư
Đang tìm nhà phát triển React Native cho dự án của bạn? Liên hệ tôi.