Johdanto

React Native mahdollistaa natiivien mobiilisovellusten rakentamisen JavaScript- ja React-sovelluksilla. Mobiilisovelluksen kehittämisen kriittinen näkökohta on navigointi: opastus eri näyttöjen ja ominaisuuksien kautta saumattomasti. [React Navigation[] on suosituin yhteisölähtöinen kirjasto navigointiin React Native -sovelluksissa. Se tarjoaa declaratiivisen API:n, tukee pinoa, välilehtiä ja laatikoita ja käsittelee alustakohtaisia eleitä ja siirtymiä. Tämä opas kattaa kaiken asennuksesta kehittyneisiin muotoihin, kuten syvään linkittämiseen ja tunnistamiseen.

Edeltävät opinnot ja asennus

Ennen kuin käytät React Navigation -navigaatiota, varmista, että olet alustanut React Native -projektin. Jos aloitat tuoreena, käytä React Native CLI- tai Expo-ohjelmaa. React Navigation toimii molempien kanssa.

Asenna ydinpaketit

Asenna tarvittavat paketit npm:n tai langan kautta.

npm install @react-navigation/native

Asenna sitten navigointiin liittyvät tukikirjastot näytönhallintaan ja turvallisen alueen käsittelyyn:

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

Jos käytät Expoa, nämä kirjastot ovat jo mukana. Paljaissa Recot Native -projekteissa noudata virallisissa asiakirjoissa olevia linkitysohjeita, jotta voidaan varmistaa, että natiivit moduulit ovat oikein kytkettyinä (autolinking käsittelee tätä React Native 0,60+ -projektille).

Asenna navigaattori

React Navigation tarjoaa useita suunnistuslaitteita. Useimmissa käyttötapauksissa suositellaan navigaattoria [:

npm install @react-navigation/native-stack

Muut navigaattorit, kuten pohjavälilehdet ja vetolaite[], asennetaan erikseen:

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

Keskeiset käsitteet

React Navigation on rakennettu kolmen päärakennuksen ympärille:

  • NavigationContainer[ . ... ..................................................................................................................................................................................................................................
  • Navigaattorit[ . Komponentit, jotka määrittelevät navigaatiokuvion (pino, välilehti, laatikko).
  • Näytöt[ . . yksittäiset komponentit, jotka edustavat sovelluksen näkymää tai sivua.

Jokainen navigointiasetus on käärittävä ]. Tämä säiliö on tyypillisesti sijoitettu sovelluskomponentin juureen.

Pinosuunnistimen käyttöönotto

Navigaattori hallitsee viime-in-ensi-out pino ruutuja. Se käyttää natiivi alustan animaatioita ja eleitä oletuksena.

Ensinnäkin tuonti tarvittavat moduulit:

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

Luo pino navigaattorin instanssi:

const Stack = createNativeStackNavigator();

Määrittele navigaattori sovelluskomponentin sisällä:

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

Jokainen vaatii prop (navigointiin käytettävä) ja ] prop (toimitettava komponentti).

Luodaan näytöt ja navigoidaan

Näytön osat ovat standardi React-komponentteja. Ne saavat kaksi tärkeää rekvisiittaa: ja . -objekti tarjoaa menetelmiä näytöstä toiseen siirtymiseen. Alla on tyypillinen Kotinäyttö:

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

Yksityiskohdat-näyttö ei tarvitse käyttää navigointia, ellei sen tarvitse navigoida pidemmälle.

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

React Navigation tarjoaa useita menetelmiä -prop:n avulla:

  • navigoida(nimi, params)[ .] .
  • push(nimi, params)[] . ... aina työntää uuden näytön pinoon, vaikka sama näyttö olisi jo pinossa.
  • goBack() [ ...] ......................................................................................................................................................................................................................................
  • korvaaja(nimi, params)[ . Korvaa nykyisen näytön uudella, poistaen virran historiasta.
  • reset[state][ .

Esimerkiksi painaa uutta instanssia Yksityiskohdat-näytön ja siirtää parametreja:

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

Näytön välissä olevien parametrien ohitus

Tiedot voidaan siirtää näytölle toisen argumentin kautta osoitteeseen tai . Vastaanottava näyttö käyttää näitä parametreja .

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

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

Aseta oletusparametriarvot käyttämällä näyttökomponentissa:

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

Määritellään navigaatioasetukset

Jokainen näyttö voi muokata otsikkoa, välilehtikuvaketta, laatikkoetikettiä jne. käyttäen rekvisiittaa tai rekvisiittaa navigaattorissa.

Otsikkomuokkaus

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

Dynaamiset vaihtoehdot voidaan asettaa käyttäen toimintoa, joka vastaanottaa :

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

Tab- navigaattori

Välilehti navigointi on yleistä huipputason sovellusosioissa. Asenna alareunan välilehdet navigaattori:

npm install @react-navigation/bottom-tabs

Luo välilehti navigaattori ja yhdistää se pino:

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

Voit pestä välilehden navigaattorin pino-navigaattorin sisällä tai päinvastoin. Muokkaa välilehden kuvakkeita prop:lla .

Laatikon navigaattori

Laatikkonavigaattori liukuu vasemmalta laatikkoon ja paljastaa navigaation kohteet.

npm install @react-navigation/drawer

Esimerkkiasetukset:

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

Avaa ja sulje lipasto ohjelmallisesti .

Nestoidut navigaattorit

Monimutkaiset sovellukset usein pesänavigointilaitteet (esim. välilehtinavigaattori pinonavigointilaitteen sisällä). React navigation käsittelee pesimistä hienosti. prop annetaan mihin tahansa ruutuun voi tarvittaessa soittaa emonavigaattorin menetelmiä. Käytä käyttääksesi vanhemman navigaattorin menetelmiä.

Esimerkki: Pino, joka sisältää välilehtinavigaattorin ja asetusnäytön:

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

Linkit ja syvä linkitys

React Navigation tukee syvälinkkejä käsittelemään URL-osoitteita, jotka avaavat tiettyjä näyttöjä. Määritä rekvisiitta :

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

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

Käsittele sitten tulevia URL-osoitteita. Tämä mahdollistaa esimerkiksi tiettyyn ruutuun linkittävien työntöilmoitusten käytön.

Tunnistautumisvirrat

Monet sovellukset vaativat ehdollisen navigoinnin todentamisen perusteella. Navigaattorin vaihtaminen juuritasolla on yhteinen malli:

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

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

Vaihtoehtoisesti, käytä yhtä pinoa ehdollisen näytön kanssa. Vältä välkkymistä pitämällä lupaus tai tila ajan tasalla.

Suorituskyky ja parhaat käytännöt

  • Käytetään natiivipinonavigointilaitetta[ (ei ) suorituskyvyn parantamiseen ja natiivisiirtymiin.
  • Minimoi samanaikaisesti asennettujen näyttöjen määrä. Navigointi poistaa piilotetut näytöt oletuksena pinosuunnistimille, mutta välilehtinavigaattoreille voit määrittää laiskan lataamisen.
  • Siirrä vain alkukantaista tietoa parametrien läpi välttääksesi serialisoinnin.
  • Käytetään tai näyttökomponentteina, jotka uudelleenkerrotaan usein.
  • Vältä raskaita laskelmia navigoinnin aikana; poiskuormaus .
  • Käsittele aina tapahtumaa tallentamattomien muutosten vuoksi.

Päätelmä

React Navigation tarjoaa intuitiivisen, mukautettavissa olevan ja suorituskykyisen tavan hallita navigointia React Native -sovelluksissa. Masteroimalla pino, välilehti, laatikko ja pesiytyneet navigaattorit sekä parametrin läpäisevät, syvä linkittävät ja tunnistautuvat virtaukset voit rakentaa vankoja mobiilikokemuksia. Lisätietoja saat []-virallisista navigointidokumenteista ja -React Native Navigation -oppaasta [. Myös -julkaisuista.