เชี่ยวชาญการนำทางใน React Native ด้วย react‑navigation v5

React-navigation คือไลบรารีการนำทางที่คิดถึงก่อนเมื่อพูดถึง navigation ใน React Native

ผมเป็นแฟนใหญ่ของไลบรารีนี้ และมันเป็นโซลูชันแรกที่ใช้จัดการ navigation ใน React Native ทุกครั้ง ส่วนหนึ่งเพราะมี API ที่ยอดเยี่ยมและง่าย รวมถึงปรับแต่งได้มาก

ผมเขียนบทความนี้เพราะ version 5 เพิ่งเปลี่ยนจาก beta มาเป็น stable แล้ว มาพร้อมกับการเปลี่ยนแปลงฟีเจอร์และการออกแบบ API ใหม่ที่ให้วิธีการประกาศ routes เรียบง่ายและแตกต่างออกไป

ในบทความนี้ เราจะไปดู API ใหม่ๆ และวิธีใช้งานในแอปพลิเคชันของเรา

ตีพิมพ์ต้นฉบับบน saidhayani.com

การติดตั้ง

วิธีติดตั้ง react-navigation เปลี่ยนไปเล็กน้อยเมื่อเทียบกับเวอร์ชันก่อนหน้า (>4.x):

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

การติดตั้ง react-navigation 5 จะเป็นแบบนี้:

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

เวอร์ชันล่าสุดของ react-navigation ใช้ไลบรารีบุคคลที่สามมากมาย เช่น react-native-gesture-handler สำหรับแอนิเมชันและจัดการทранซิชัน คุณต้องติดตั้งไลบรารีเหล่านี้เสมอ

// 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 

หน้าจอแบบไดนามิก (Dynamic Screens)

API ใหม่ 도입ความไดนามิกในการเริ่มต้น routes ก่อนหน้านี้ทำแบบ static - คือเราต้องกำหนด Routes ในไฟล์ config

// @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 ใหม่มาพร้อมคอมโพเนนต์แบบไดนามิก และทำให้ navigation ไดนามิกมากขึ้น
วิธีใหม่ในการประกาศ Routes จะคล้ายกับนี้:

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> ) } 

วิธีใหม่นี้ไดนามิก ใช้ง่ายกว่า และคล้ายกับ react-router API

ตัวเลือกแบบไดนามิก (Dynamic Options)

นี่เป็นฟีเจอร์ที่ชุมชนขอมานานมาก ผมเคยมีปัญหากับวิธีเก่า (static) และยากมากที่จะเปลี่ยนพฤติกรรม navigation แบบไดนามิก

วิธีเก่า => < 4.x

กับ react-navigation เวอร์ชันเก่า เราต้องกำหนด static options ไม่มีทางเปลี่ยนแบบไดนามิก

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

วิธีใหม่ (version 5)

React-navigation มาพร้อมวิธีแบบไดนามิกที่เรียบง่าย เราสามารถตั้งค่า options ให้หน้าจอใดๆ ได้แค่ใช้ 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> ) } 

ด้วย dynamic options ผมสามารถเปลี่ยน title ตามสถานะการยืนยันตัวตน เช่น ถ้าผู้ใช้ล็อกอินแล้ว ตั้ง title หน้าจอเป็น username หรือเปลี่ยนสีพื้นหลัง header

สิ่งนี้มีประโยชน์มากโดยเฉพาะถ้าใช้ dynamic themes หรือจะ implement dark mode ในแอป

Hooks

นี่คือฟีเจอร์โปรดของผมจนถึงตอนนี้ และประหยัดเวลามาก API ใหม่นำเสนอ custom hooks บางอย่างเพื่อทำการดำเนินการบางอย่าง

ในเวอร์ชันก่อน เช่น ถ้าผมต้องการ currentName ของหน้าจอที่ active ผมต้องสร้าง helpers ให้ทำ åt ใกล้เคียงกับนี้

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 } 

Hooks API ช่วยให้ผมหลีกเลี่ยงสิ่งเหล่านี้ และเข้าถึง Navigation API ได้ง่ายด้วยเพียงบรรทัดเดียวผ่าน hook

ตอนนี้ผมได้ route name ง่ายด้วย useRoute Hook

import { useRoute } from "@react-navigation/native" const AboutScreen = ({ navigation }) => { const route = useRoute() return ( <View style={{ justifyContent: "space-around", flex: 1, alignItems: "center", }}> {/* แสดง RouteName ที่นี่ */} <Text style={styles.title}>{route.name}</Text> </View> ) } 

เราทำอย่างเดียวกันได้กับ useNavigationState Hook มันให้การเข้าถึง navigation state

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

React-navigation ยังมี hooks อื่นๆ อีก เช่น:

• useFocusEffect : side effect hook ที่เมื่อโหลดหน้าจอแล้ว จะคืนค่าหน้าจอที่โฟกัสอยู่
• useLinking: จัดการ deep linking

แนะนำให้ไปเช็คดูครับ

สรุป

API ใหม่ของ react-navigation เปลี่ยนจาก static ไป dynamic อย่างชัดเจน ทิศทางที่ดีซึ่งจะเปลี่ยนวิธีจัดการ navigation ใน React Native ไปเลย Dynamic routes เป็นคำขอหลักของผู้ใช้ react-navigation และวิธีใหม่นี้จะช่วยให้เราสร้างประสบการณ์การนำทางผู้ใช้ที่ดีขึ้น

หาเนื้อหา React Native เพิ่มเติมได้ที่นี่

ขอบคุณที่อ่าน

• Twitter
• GitHub
• Join the mail-list

มองหานักพัฒนา React Native สำหรับโปรเจกต์? ติดต่อผมได้เลย.