Native Routing opnieuw uitgevonden met Expo Router

Op bestanden gebaseerde routering is een gebruikelijke webontwikkelingstechniek die een URL-pad toewijst aan een specifiek bestand in een projectdirectory. Dit systeem vermijdt de complexe routeringsconfiguraties die gepaard gaan met het bouwen van navigatiesystemen.

Met de release van de Expo Router-bibliotheek is op bestanden gebaseerde routering mogelijk met React Native-applicaties. Expo Router zou een beter navigatiesysteem kunnen zijn voor React Native-ontwikkelaars die met Expo werken.

Navigatie opnieuw uitgevonden met Expo Router

De expo-router biedt een declaratieve routeringsoplossing voor React Native Expo-apps. Dit systeem is aanzienlijk anders dan u zou doen bouw een navigatiesysteem met behulp van React Navigation. Expo Router maakt zich grote zorgen over het gebruik van het huidige werkende navigatiesysteem.

Deze problemen zijn onder meer het hebben van een navigatiesysteem dat niet overal consistent werkt, moeilijkheden bij het beheren van deep links en ook complexe instellingen voor aangepaste navigatieovergangen.

De op bestanden gebaseerde navigatie/routing van de expo router is een eenvoudig systeem dat goed werkt en al bekend is bij JavaScript-ontwikkelaars en JavaScript-frameworks zoals Next.js, waar u routes kunt definiëren.

Expo Router installeren en instellen

Het is vrij eenvoudig om uw Expo-project te migreren van het oude navigatiesysteem naar een Expo-router.

Stap 1: Installeer de Expo Router

Gebruik deze terminalopdracht om het expo-router-installatieprogramma uit te voeren:

npx expo expo-router installeren

U moet er ook voor zorgen dat u deze peer-afhankelijkheden hebt geïnstalleerd:

• reactie-native-veilige-gebied-context
• reactie-native-schermen
• expo-koppeling
• expo-statusbalk
• reactie-native-gebaar-handler

Als er iets ontbreekt, kunt u ze installeren door het volgende uit te voeren:

npx expo installeren 

Stap 2: werk het toegangspunt bij

Maak een nieuwe aan index.js bestand om uw bestaande te vervangen App.js ingangspunt en stel de index.js als het toegangspunt van de app binnenin app.json:

// Stel index.js in als startpunt
{
"voornaamst": "index.js"
}
// Importeer het volgende in index.js
importeren"expo-router/invoer";

Expo Router maakt gebruik van een diepe koppeling schema om te bepalen welk scherm of welke inhoud moet worden geopend bij het routeren.

Definieer een schema voor deep links voor uw app door een regeling eigendom aan app.json:

{
"tentoonstelling": {
"schema": "mijnapp"
 }
}

Stap 4: definitieve configuratie

De laatste stap is het instellen van de metrobundel van uw Expo-app en het configureren van Babel om Expo Router in uw app te ondersteunen.

Binnen babel.config.js pas de bestaande code aan om er zo uit te zien:

moduul.export = functie (api) {
 api.cache(WAAR);
opbrengst {
 voorinstellingen: ["babel-preset-expo"],
 plug-ins: [
vereisen.oplossen("expo-router/babel"),
/* */
 ],
 };
};

Bouw nu uw app opnieuw op en start deze door het volgende uit te voeren:

npx expo --clear

Routes voor uw app bouwen met Expo Router

U kunt beginnen met het instellen van een navigatiestroom binnen de app map. De index.js bestand is uw startpunt. Expo Router voegt het pad toe van elk bestand dat u binnen maakt app naar het routesysteem van de app met URL-deeplinks die overeenkomen met elke pagina.

Maak bijvoorbeeld een SecondScreen.js bestand in de app directory en exporteer een standaardcomponent:

importeren { StyleSheet, tekst, weergave } van"reageren-native";
importeren Reageer van"Reageer";
const TweedeScherm = () => {
opbrengst (


Tweede scherm</Text>
 </View>
 </View>
 );
};
exporterenstandaard tweede scherm;
const stijlen = StyleSheet.create({});

Je zou naar dit scherm kunnen navigeren vanaf index.js met de gebruikRouter() methode:

importeren { gebruikRouter } van"expo-router";
exporterenstandaardfunctieBladzijde() {
const navigatie = useRouter();
opbrengst (

Hallo wereld</Text>
Dit is de eerste pagina van uw app.</Text>
 titel="Navigeer naar SecondScreen"
 onPress={() => {
 navigatie.push("/Tweede Scherm");
 }}
 />
 </View>
 );
}

Hier wijst u de router toe aan navigatie en gebruikt u deze binnen het Button-element door te bellen navigatie.push("/second"). Het argument binnen push is het bestandspad van het scherm waarnaar u wilt navigeren.

Binnen tweede scherm u kunt ook als volgt naar het indexscherm navigeren:

importeren { Koppeling } van"expo-router";
const TweedeScherm = () => {
opbrengst (


Tweede scherm</Text>
"/" alsKind>

Navigeer naar index.js</Text>
 </TouchableOpacity>
 </Link>
 </View>
 </View>
 );
};

Het link-element gebruikt een href-prop om het pad te specificeren. Inside-app, de "/" pad komt overeen met het invoerbestand (index.js). De tweede prop is asChild. Met deze prop kunt u een eerste onderliggende component renderen met alle gespecificeerde props in plaats van de standaard Link-component. U kunt dit gebruiken om het uiterlijk van de Link-component aan te passen of om aangepaste routeringslogica te implementeren.

Dynamische routes definiëren

Met Dynamische routes kunt u op dynamische wijze routes genereren op basis van bepaalde parameters of gegevens. In plaats van een vaste set routes te definiëren, verkrijgt u flexibiliteit en aanpassingsvermogen in de navigatie van uw app.

Om dynamische routes in Expo Router te gaan gebruiken, moet u de routes definiëren om dynamische inhoud te verwerken. U kunt geparametriseerde routes gebruiken door tijdelijke aanduidingen op te geven binnen het pad van de route. De waarden voor deze tijdelijke aanduidingen zijn dan beschikbaar voor uw route wanneer iemand ernaartoe navigeert.

Overweeg bijvoorbeeld een blog-app waarin u individuele blogposts wilt weergeven. U kunt een dynamische route definiëren om elk van de blogposts af te handelen:

// app/routes/BlogPost.js
importeren Reageer van"Reageer";
importeren { gebruikRouter } van"expo-router";
const Blogbericht = ({ route }) => {
const { postId } = route.params;
opbrengst (

Blogbericht weergeven met ID: {postId}</Text>
 </View>
 );
};
exporterenstandaard Blogpost;

In dit voorbeeld definieert u een dynamische routecomponent met de naam Blogpost. De route.parameters object geeft u toegang tot de parameterwaarden die aan de route zijn doorgegeven. In dit geval ben je toegang tot een postId parameter om de bijbehorende blogpost weer te geven.

Dynamische routes genereren

Nu u een dynamische route hebt gedefinieerd, kunt u dynamisch routes genereren op basis van gegevens of gebruikersinvoer. Als u bijvoorbeeld een lijst met blogberichten hebt die zijn opgehaald uit een API, kunt u dynamisch routes genereren voor elk blogbericht.

Hier is een voorbeeld:

// app/components/BlogList.js
importeren Reageer van"Reageer";
importeren { gebruik Navigatie } van"expo-router";
const BlogLijst = ({ Blog berichten }) => {
const navigatie = gebruikNavigatie();
const navigeerNaarBlogPost = (postId) => {
 navigatie.navigatie("Blogpost", { postId });
 };
opbrengst (

 {blogPosts.map((na) => (
 sleutel={post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exporterenstandaard BlogLijst;

In dit voorbeeld herhaalt u de Blog berichten array en render a onderdeel voor elke post. Wanneer u op een bericht drukt, wordt de navigeerToBlogPost functie wordt uitgevoerd, waarbij de postId naar de vaarroute.

Dynamische routes afhandelen

U kunt luisteren naar navigatiegebeurtenissen die specifiek zijn voor een dynamische route met behulp van de gebruik FocusEffect haak.

Bijvoorbeeld:

// app/routes/BlogPost.js
importeren Reageer van"Reageer";
importeren { Route, gebruikFocusEffect } van"expo-router";
const Blogbericht = ({ route }) => {
const { postId } = route.params;
 gebruikFocusEffect(() => {
// Haal blogpostgegevens op op basis van postId
// Voer eventuele andere noodzakelijke acties op focus uit
 });
opbrengst (

Blogbericht weergeven met ID: {postId}</Text>
 </View>
 );
};
exporterenstandaard Blogpost;

In dit voorbeeld is de gebruik FocusEffect hook luistert naar focusgebeurtenissen die specifiek zijn voor de Blogpost bestanddeel. Binnen de callback kunt u aanvullende gegevens ophalen, acties uitvoeren of het scherm bijwerken op basis van de gerichte blogpost.

Navigeren met dynamische routes

Om naar een dynamische route te navigeren, kunt u de navigatiemethoden van Expo Router gebruiken.

Om bijvoorbeeld naar de Blogpost component met een specifiek postId, kunt u de navigatie.navigeren methode:

// app/components/BlogList.js
importeren Reageer van"Reageer";
importeren { gebruik Navigatie } van"expo-router";
const BlogLijst = ({ Blog berichten }) => {
const navigatie = gebruikNavigatie();
const navigeerNaarBlogPost = (postId) => {
 navigatie.navigatie("Blogpost", { postId });
 };
opbrengst (

 {blogPosts.map((na) => (
 sleutel={post.id}
 onPress={() => navigationToBlogPost (post.id)}
 >
{post.title}</Text>
 </TouchableOpacity>
 ))}
 </View>
 );
};
exporterenstandaard BlogLijst;

Wanneer u op een blogpost drukt, wordt de navigeerToBlogPost functie zal vuren met de postId.

Expo Router helpt u bij het structureren van uw native apps

De Expo Router biedt een uitstekende oplossing voor het beheren van navigatie in uw React Native-apps. Door de native routing-ervaring opnieuw uit te vinden, biedt Expo Router flexibiliteit en gebruiksgemak.

Je hebt de functies van Expo Router verkend, je verdiept in basisrouteringsconcepten en ontdekt hoe je dynamische routes kunt bouwen. Met Expo Router kunt u dynamische navigatiestromen creëren, verschillende gegevens of gebruikersinvoer verwerken en de navigatie in uw app personaliseren.