Introducere

Reacţionează Native permite construirea de aplicaţii mobile native cu JavaScript şi React. Un aspect critic al dezvoltării aplicaţiilor mobile este navigarea: ghidarea utilizatorilor prin diferite ecrane şi caracteristici fără probleme. React Navigation este cea mai populară bibliotecă de navigare bazată pe comunitate pentru implementarea navigaţiei în aplicaţiile Native Reacţionează. Acesta oferă un API declarativ, suportă navigatorii stivă, tab şi sertar, şi manevrează gesturi şi tranziţii specifice platformei. Acest ghid acoperă totul de la instalare la modele avansate, cum ar fi conectarea profundă şi fluxurile de autentificare.

Precondiții și instalare

Înainte de a utiliza React Navigation, asigurați-vă că aveți un proiect Nativ React inițializat. Dacă începeți din nou, utilizați React Native CL sau Expo. React Navigation funcționează cu ambele.

Instalați pachete centrale

Instalați pachetele necesare prin intermediul npm sau fire. Biblioteca de bază și principalele sale dependențe sunt:

npm install @react-navigation/native

Apoi instalaţi bibliotecile auxiliare pe care React Navigation depinde de gestionarea ecranului şi manipularea zonei sigure:

npm install react-native-screens react-native-safe-area-context

Dacă utilizați Expo, aceste biblioteci sunt deja incluse. Pentru proiectele Native React goale, urmați instrucțiunile de legătură din documentația oficială pentru a se asigura că modulele native sunt conectate corect (autolinking se ocupă de acest lucru pentru React Native 0.60+).

Instalați un Navigator

React Navigation oferă mai mulți navigatori. Navigatorul nativ stack este recomandat pentru majoritatea cazurilor de utilizare:

npm install @react-navigation/native-stack

Alte navigatori precum bate file de jos și drawer] sunt instalate separat:

npm install @react-navigation/bottom-tabs
npm install @react-navigation/drawer

Concepte fundamentale

React Navigation este construit în jurul a trei blocuri principale:

  • Coail de navigație
  • Navigatori
  • Screens

Fiecare setup de navigare trebuie să fie înfășurat într-un . Acest container este plasat de obicei la rădăcina componentei aplicației.

Configurarea unui navigator stiva

Navigatorul stack gestionează un stiva de ultima-in-primul-out de ecrane. Folosește platforma nativă

În primul rând, importă modulele necesare:

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

Creează un exemplu de navigator stiva:

const Stack = createNativeStackNavigator();

Defineşte navigatorul din componenta App:

function App() {
 return (
 <NavigationContainer>
 <Stack.Navigator>
 <Stack.Screen name="Home" component={HomeScreen} />
 <Stack.Screen name="Details" component={DetailsScreen} />
 </Stack.Navigator>
 </NavigationContainer>
 );
}

Fiecare necesită un suport (utilizat pentru navigație) și un suport (componenta React pentru a reda).

Crearea de ecrane și navigare

Ecrane sunt componente standard React. Ei primesc două elemente de recuzită importante: și . Obiectul oferă metode de deplasare între ecrane. Mai jos este un ecran tipic Home:

function HomeScreen({ navigation }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Home Screen</Text>
 <Button
 title="Go to Details"
 onPress={() => navigation.navigate('Details')}
 />
 </View>
 );
}

Ecranul Detalii nu trebuie să utilizeze propulsorul de navigație decât dacă trebuie să navigheze mai departe.

function DetailsScreen({ route }) {
 return (
 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
 <Text>Details Screen</Text>
 </View>
 );
}

Metode de navigație

React Navigation oferă mai multe metode prin intermediul propunerii :

  • navează [numele, paramele]
  • push [nume, params]
  • GoBack()
  • Replace [nume, params]
  • resetează[stat]]

De exemplu, pentru a împinge un nou exemplu al ecranului Detalii și parametrii de trecere:

navigation.push('Details', { itemId: 42, otherParam: 'anything' });

Parametrii de trecere între ecrane

Datele pot fi transmise unui ecran prin intermediul celui de-al doilea argument către sau . Ecranul primitor accesează acești parametri prin .

// In HomeScreen
navigation.navigate('Details', { userId: 123 });

// In DetailsScreen
function DetailsScreen({ route }) {
 const { userId } = route.params;
 return <Text>User ID: {userId}</Text>;
}

Setează valorile parametrilor impliciti care utilizează pe componenta ecranului:

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 initialParams={{ itemId: 0 }}
/>

Configurare opțiuni de navigație

Fiecare ecran poate personaliza antetul, pictograma tab-ului, eticheta sertarului, etc., folosind recuzita de pe sau prop ] de pe navigator.

Personalizare antet

<Stack.Screen
 name="Details"
 component={DetailsScreen}
 options={{
 title: 'Details',
 headerStyle: { backgroundColor: '#f4511e' },
 headerTintColor: '#fff',
 headerTitleStyle: { fontWeight: 'bold' },
 }}
/>

Opțiuni dinamice pot fi setate utilizând o funcție care primește :

options={({ route }) => ({ title: route.params.name })}

Navigarea pe file este frecventă pentru secţiunile de aplicaţii de nivel superior. Instalaţi navigatorul filelor de jos:

npm install @react-navigation/bottom-tabs

Creați un navigator file și combinați-l cu stiva:

import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

function HomeTabs() {
 return (
 <Tab.Navigator>
 <Tab.Screen name="Feed" component={FeedScreen} />
 <Tab.Screen name="Profile" component={ProfileScreen} />
 </Tab.Navigator>
 );
}

Puteți cuibări navigatorul file în interiorul unui navigator stack sau invers. Personalizați icoanele file folosind ] prop cu .

Un navigator de sertar alunecă un sertar din stânga, dezvăluind obiecte de navigare. Instalați-l:

npm install @react-navigation/drawer

Configurare exemplu:

import { createDrawerNavigator } from '@react-navigation/drawer';

const Drawer = createDrawerNavigator();

function AppDrawer() {
 return (
 <Drawer.Navigator>
 <Drawer.Screen name="Home" component={HomeScreen} />
 <Drawer.Screen name="Settings" component={SettingsScreen} />
 </Drawer.Navigator>
 );
}

Utilizați ] pentru a deschide și închide programul sertarului.

Aplicaţiile complexe fac adesea cuib de navigatori (de exemplu, un navigator de file în interiorul unui navigator stack). Reacţionează Navigarea se ocupă cu cuiburi graţioase. Prop-ul furnizat oricărui ecran poate apela metode pe un navigator părinte, dacă este necesar. Utilizaţi pentru a accesa metodele navigatorului părinte.

Exemplu: Un stiva care conține un navigator filă și un ecran de setări:

function RootStack() {
 return (
 <Stack.Navigator>
 <Stack.Screen name="Main" component={MainTabs} options={{ headerShown: false }} />
 <Stack.Screen name="Settings" component={SettingsScreen} />
 </Stack.Navigator>
 );
}

Legătură strânsă şi legătură profundă

React Navigation suportă conectarea profundă la URL-uri care deschid ecrane specifice. Configurați propulsorul pe :

const linking = {
 prefixes: ['myapp://', 'https://myapp.com'],
 config: {
 screens: {
 Home: 'home',
 Details: 'details/:itemId',
 },
 },
};

<NavigationContainer linking={linking}>
 {/* navigators */}
</NavigationContainer>

Apoi manipulați URL-uri de intrare. Acest lucru permite caracteristici cum ar fi notificări de împingere care leagă la un anumit ecran.

Fluxuri de autentificare

Multe aplicații necesită navigație condiționată bazată pe starea de autentificare. Un model comun este de a comuta navigatorul la nivelul rădăcină:

function App() {
 const [isSignedIn, setIsSignedIn] = useState(false);

 return (
 <NavigationContainer>
 {isSignedIn ? <AppNavigator /> : <AuthNavigator />}
 </NavigationContainer>
 );
}

Alternativ, utilizați un singur stiva cu ecrane condiționate. Evitați pâlpâirea prin menținerea promisiunii sau starea la zi.

Performanţe şi cele mai bune practici

  • Utilizați navigatorul stack-ului nativ (nu ) pentru o performanță mai bună și pentru tranziții native.
  • Minimizează numărul de ecrane montate imediat. Reacționează Navigarea demontează ecranele ascunse implicit pentru navigatorii de stiva, dar pentru navigatorii de file, poți configura încărcarea leneș.
  • Transmite doar date primitive prin parametri pentru a evita problemele de serilizarea.
  • Se utilizează sau pentru componentele ecranului care se redând adesea.
  • Evitați calculele grele în timpul tranziției de navigație; descărcați lucrul cu .
  • Întotdeauna să se ocupe de eveniment pentru schimbări nesalvate prompte.

Concluzie

React Navigation oferă un mod intuitiv, personalizabil și performant de a gestiona navigarea în aplicațiile Native React. Prin stack-ul de mastering, tab, sertar și navigatori cu cuiburi, împreună cu fluxurile de parametri care trec, de legături profunde și de autentificare, puteți construi experiențe mobile robuste. Pentru mai multe detalii, consultați documentația oficială de navigație React și Reacționați ghidul navigației native. De asemenea, luați în considerare citirea articolelor comunitare pe ]Reacționați cele mai bune practici de navigație pentru a vă rafina implementarea.