React-navigation este biblioteca de navigare care îmi vine în minte când vorbim despre navigare în React Native.

Sunt un mare fan al acestei biblioteci și este întotdeauna prima soluție pe care o folosesc pentru a gestiona navigarea în React Native. Aceasta este în parte pentru că are un API minunat și ușor și este foarte personalizabil.

Scriu acest articol pentru că versiunea 5 tocmai a trecut de la beta la stabilă. Acesta vine cu unele modificări ale caracteristicilor și un nou design API care oferă un mod simplu și diferit de a declara rute.

În acest articol, vom trece prin noile API-uri și vom analiza modalități de a le utiliza în aplicațiile noastre.

Publicat inițial la saidhayani.com

Se instalează

Modul în care instalați react-navigation s-a schimbat puțin, comparativ cu versiunile anterioare (> 4.x):

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

Instalarea react-navigation 5 va arăta astfel:

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

Cele mai recente versiuni de react-navigation utilizează multe biblioteci terțe, cum ar fi handler-gest-react-native pentru animație și gestionarea tranzițiilor. Deci, trebuie întotdeauna să instalați acele biblioteci.

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

Ecrane dinamice

Noul API introduce dinamism în inițializarea rutelor. Anterior se făcea static – practic, trebuia să ne definim rutele într-un fișier de configurare.

// @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);

Noul API vine cu componente dinamice. și a făcut ca navigarea să fie mai dinamică.
Noul mod de a declara rutele va fi la fel ca următorul.

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-navigation5-demo

Acest nou mod este dinamic, mai simplu de utilizat și este cam asemănător cu API-ul reactor-router.

Opțiuni dinamice

Aceasta a fost cea mai solicitată funcție de comunitate de mult timp. Am avut întotdeauna probleme cu vechea metodă (statică) și a fost foarte greu să schimb comportamentul de navigare dinamic.

Vechea metodă => <4.x

Cu versiuni mai vechi de navigare reactivă a trebuit să definim opțiunile statice. Și nu a existat nicio modalitate de a schimba acest lucru dinamic.

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

Noua metodă (versiunea 5)

Navigarea reactivă vine cu o metodă dinamică destul de simplă. Putem seta opțiunile pe orice ecran folosind doar 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>
  )
}

react-navigation-header

Cu opțiuni dinamice, pot schimba titlul pe baza autentificării. De exemplu, dacă utilizatorul este autentificat, pot seta titlul ecranului să fie numele de utilizator al utilizatorului sau pot schimba backgroundColor pentru antet.

Acest lucru este mai util mai ales dacă utilizați teme dinamice sau dacă sunteți dispus să implementați modul întunecat în aplicația dvs.

Cârlige

Aceasta este funcția mea preferată de până acum și economisește timp. Noul API a introdus câteva cârlige personalizate pentru a efectua anumite acțiuni.

În versiunile anterioare, de exemplu, dacă ar fi trebuit să obțin numele curent al ecranului activ, a trebuit să creez niște ajutoare pentru a face asta pentru mine cam la fel ca în cele ce urmează.

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-ul hooks mă ajută să evit toate aceste lucruri și îmi facilitează accesul API-ului de navigare cu o singură linie folosind un hook.

Acum pot folosi cu ușurință RouteName useRoute Cârlig.

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

Putem face același lucru cu useNavigationState Cârlig. Ne oferă acces la starea de navigație.

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

Navigația React oferă și alte cârlige, de exemplu:

  • useFocuseEffect : un cârlig de efecte secundare care, atunci când ecranele sunt încărcate, returnează ecranul focalizat
  • useLinking: se ocupă de deepLinking

Vă recomand cu tărie verifică-i.

Încheierea

Noul API de reacție-navigare trece cu siguranță de la static la dinamic. Este o direcție excelentă care va schimba absolut modul în care gestionăm navigarea în React Native. Traseele dinamice au fost o solicitare majoră a utilizatorilor de navigare reactivă, iar acest nou mod ne va ajuta să creăm o experiență mai bună de navigare a utilizatorului.

Puteți găsi mai mult conținut despre Reacționează nativ aici

Mulțumesc pentru lectură

Căutați un dezvoltator React Native pentru proiectul dvs.? Loveste-ma.