วิธีจัดการกับการนำทางใน React Native ด้วย react-navigation 5

React-navigation คือไลบรารีการนำทางที่อยู่ในหัวของฉันเมื่อเราพูดถึงการนำทางใน React Native

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

ฉันกำลังเขียนบทความนี้เพราะเวอร์ชัน 5 เพิ่งเปลี่ยนจากเบต้าเป็นเสถียร มันมาพร้อมกับการเปลี่ยนแปลงคุณสมบัติบางอย่างและการออกแบบ API ใหม่ที่มอบวิธีที่ง่ายและแตกต่างในการประกาศเส้นทาง

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

เผยแพร่ครั้งแรกบน Sayhayani.com

กำลังติดตั้ง

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

// > 4.x verions
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

หน้าจอไดนามิก

API ใหม่แนะนำไดนามิกในการเริ่มต้นเส้นทาง ก่อนหน้านี้ทำแบบสแตติก โดยพื้นฐานแล้ว เราต้องกำหนดเส้นทางของเราในไฟล์กำหนดค่า

// @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 ใหม่มาพร้อมกับส่วนประกอบแบบไดนามิก และทำให้การนำทางมีไดนามิกมากขึ้น
วิธีการประกาศเส้นทางแบบใหม่จะมีลักษณะดังนี้

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

ตัวเลือกไดนามิก

นี่เป็นคุณสมบัติที่ได้รับการร้องขอมากที่สุดจากชุมชนมาเป็นเวลานาน ฉันมักมีปัญหากับวิธีการแบบเก่า (คงที่) เสมอ และเป็นการยากมากที่จะเปลี่ยนพฤติกรรมการนำทางแบบไดนามิก

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

ด้วยการนำทางแบบตอบสนองเวอร์ชันเก่า เราต้องกำหนดตัวเลือกแบบคงที่ และไม่มีทางที่จะเปลี่ยนแปลงสิ่งนี้ได้

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

วิธีการใหม่ (เวอร์ชัน 5)

React-navigation มาพร้อมกับวิธีการแบบไดนามิกซึ่งค่อนข้างง่าย เราสามารถตั้งค่าตัวเลือกให้กับหน้าจอใดก็ได้โดยใช้เพียง props .

const AppNavigation = ({}) => {
  let auth = {
    authenticated: true,
    user: {
      email: "[email protected]",
      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>
  )
}

ด้วยตัวเลือกไดนามิก ฉันสามารถเปลี่ยนชื่อตามการรับรองความถูกต้อง ตัวอย่างเช่น หากผู้ใช้ได้รับการตรวจสอบสิทธิ์ ฉันสามารถตั้งชื่อหน้าจอให้เป็นชื่อผู้ใช้ของผู้ใช้ หรือฉันสามารถเปลี่ยนสีพื้นหลังสำหรับส่วนหัวได้

ซึ่งจะมีประโยชน์มากกว่าโดยเฉพาะอย่างยิ่งหากคุณใช้ธีมไดนามิกหรือหากคุณต้องการใช้โหมดมืดในแอป

ตะขอ

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

ตัวอย่างเช่น ในเวอร์ชันก่อนๆ หากฉันต้องได้รับ currentName ของหน้าจอที่ใช้งาน ฉันต้องสร้างตัวช่วยขึ้นมาเพื่อทำสิ่งนี้ให้เหมือนกับตัวอย่างต่อไปนี้

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

ตอนนี้ฉันสามารถรับ RouteName ได้อย่างง่ายดายโดยใช้ useRoute ตะขอ

import { useRoute } from "@react-navigation/native"
const AboutScreen = ({ navigation }) => {
  const route = useRoute()
  return (
    <View
      style={{
        justifyContent: "space-around",
        flex: 1,
        alignItems: "center",
      }}
    >
      {/*    Display the RouteName here */}
      <Text style={styles.title}>{route.name}</Text>
    </View>
  )
}

เราสามารถทำสิ่งเดียวกันกับ useNavigationState ตะขอ. มันทำให้เราเข้าถึงสถานะการนำทางได้

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

React-navigation มี hooks อื่น ๆ เช่น:

• useFocuseEffect :ตะขอผลข้างเคียงที่เมื่อโหลดหน้าจอแล้ว จะกลับหน้าจอที่โฟกัส
• useLinking :จัดการ DeepLinking

ฉันขอแนะนำให้คุณลองดู

สรุปผล

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

คุณสามารถค้นหาเนื้อหาเพิ่มเติมเกี่ยวกับ React Native ได้ที่นี่

ขอบคุณสำหรับการอ่าน

• ทวิตเตอร์
• GitHub
• เข้าร่วมรายการอีเมล

กำลังมองหา React Native Developer สำหรับโครงการของคุณหรือไม่? ตีฉันขึ้น .