Expo Apps van ExpoKit loskoppelen concepten

In dit bericht leert u wat ExpoKit is en hoe het wordt gebruikt voor het toevoegen van native functionaliteit aan Expo-apps. Je zult ook enkele van zijn voors en tegens leren. 

In mijn Easy Native Development met Expo-post, hoorde je hoe Expo het gemakkelijker maakt voor beginners om apps te maken met React Native. Je hebt ook geleerd dat Expo ontwikkelaars toestaat om met het ontwikkelen van React Native-apps sneller aan de slag te gaan omdat Android Studio, Xcode of andere ontwikkeltools niet meer hoeven te worden opgezet.

Maar zoals je ook hebt gezien, ondersteunt Expo niet alle native functies die een app nodig heeft. Hoewel het Expo-team altijd bezig is om meer native-functionaliteit te ondersteunen, is het een goed idee om te leren hoe je een bestaand Expo-project kunt omzetten naar een standaard native project, zodat je gemakkelijk kunt overstappen als dat nodig is. Dus, in deze tweedelige serie, zullen we kijken hoe dat te doen. 

In dit bericht leer je wat ExpoKit is en wanneer je het nodig hebt, en ook welke van de functies van het Expo-platform worden behouden en verloren zodra je de ExpoKit losmaakt. 

voorwaarden

Deze tutorial gaat ervan uit dat je je computer al hebt opgezet voor Expo en React Native development. Dit betekent dat je Android Studio of Xcode of beide nodig hebt, afhankelijk van waar je wilt inzetten. Zorg ervoor dat u de Aan de slag met de Expo-gids, en ook de "Aan de slag" -gids in de React Native-documenten op het tabblad "Projecten met inheemse code bouwen" voor uw specifieke platform als u dit nog niet hebt gedaan. 

Kennis van Node.js is nuttig, maar niet verplicht.

Wat is ExpoKit?

ExpoKit is een Objective-C en Java-bibliotheek waarmee u het Expo-platform kunt gebruiken binnen een standaard React Native-project. Wanneer ik zeg "standaard React Native project", bedoel ik een die is gemaakt met behulp van de react-native init commando. 

Het nadeel van detaching naar ExpoKit is dat je de standaard native ontwikkelomgeving voor React Native moet instellen!

Een ander nadeel is dat je beperkt bent tot de React en React Native-versie die door ExpoKit wordt gebruikt op het moment dat je je app loskoppelt. Dit betekent dat er mogelijk compatibiliteitsproblemen zijn die u moet oplossen als de native module die u probeert te installeren, afhankelijk is van een eerdere versie van React of React Native. 

Als u denkt dat uw app een groot aantal native modules nodig heeft die de ingebouwde API's van React Native en Expo niet al ondersteunen, raad ik aan dat u de Expo API's niet gebruikt. Op die manier kunt u eenvoudig "uitwerpen" naar een standaard React Native-project op het moment dat u aangepaste native modules moet gaan gebruiken. 

Wanneer loskoppelen van ExpoKit?

Misschien wilt u uw bestaande Expo-project loskoppelen om een ​​van de volgende redenen:

• De API die wordt weergegeven door native-functies die worden ondersteund door Expo, dekt niet uw use-case.
• U moet een native-functionaliteit gebruiken die momenteel niet door het Expo-platform wordt ondersteund. Voorbeelden zijn Bluetooth- en achtergrondtaken.
• U wilt specifieke services gebruiken. Op dit moment gebruikt Expo Firebase voor realtime gegevens en Sentry voor foutrapportage. Als u een alternatieve service wilt gebruiken, is uw enige optie om uw eigen code te schrijven voor communicatie met de HTTP API over de services die u wilt gebruiken of om een ​​bestaande native module te installeren die het werk doet.
• U hebt een bestaande configuratie voor Continuous Integration die niet goed werkt met Expo, bijvoorbeeld als u Fastlane of Bitrise gebruikt voor continue integratie. Expo integreert niet echt met die diensten uit de doos, dus je zult je eigen integratiecode moeten schrijven als je ze wilt gebruiken terwijl je nog op het Expo-platform bent.

Kenmerken behouden bij het loskoppelen van ExpoKit

Afkoppelen van ExpoKit betekent dat je een aantal functies verliest die worden aangeboden door het Expo-platform. De volgende essentiële functies blijven echter behouden:

• Expo API's. U kunt nog steeds Expo-API's gebruiken, zoals de API voor machtigingen.
• Live Reload. Vrijstaande Expo-apps kunnen nog steeds live herladen gebruiken tijdens het ontwikkelen van de app. Het enige verschil is dat u de Expo-client-app niet meer kunt gebruiken. Als u zich ontwikkelt voor Android, kunt u nog steeds uw Android-apparaat of een emulator zoals Genymotion gebruiken om de app te testen. Als u zich ontwikkelt voor iOS, kan de app worden uitgevoerd op de simulators die u in Xcode hebt geïnstalleerd. U kunt het ook op uw iPhone of iPad uitvoeren, maar u moet enkele extra stappen volgen die ik in deze zelfstudie niet zal bespreken.

Functies die u verliest bij het loskoppelen van ExpoKit

Door los te koppelen aan ExpoKit, verliest u de volgende functies:

• Eenvoudig delen van apps door middel van QR-code en Expo Snack. Nadat je je hebt losgemaakt van ExpoKit, zul je merken dat je je app nog steeds kunt delen via de Expo XDE. Er wordt nog steeds een QR-code gegenereerd, maar die code werkt niet meer wanneer u deze scant met de Expo-client-app.
• Zelfstandige apps bouwen via de servers van Expo. U kunt de. Niet langer gebruiken exp build commando om het te bouwen .ipa of .apk bestanden op de servers van Expo. Dit betekent dat u Android Studio of Xcode (afhankelijk van het platform dat u wilt implementeren) moet installeren en de app lokaal zelf moet bouwen. Als alternatief kunt u Microsoft App Center gebruiken om de app te bouwen als u nog geen lokale ontwikkelomgeving hebt ingesteld. Merk op dat je geen commando's zoals kunt gebruiken react-native run-android of react-native run-ios om de app uit te voeren, zoals u zou doen in een standaard React Native-project. 
• Push-notificatieservice van Expo. Expo beheert niet langer uw push-certificaten na het loskoppelen, dus de push-notificatiepijplijn moet handmatig worden beheerd.

Wat we zullen creëren

Om het voordeel van ontkoppeling aan ExpoKit te laten zien, zullen we een app maken die een native-functie nodig heeft die het Expo-platform momenteel niet ondersteunt. De app is een app voor het delen van locaties. Het zal meestal op de achtergrond worden uitgevoerd en de huidige locatie van de gebruiker ophalen. Vervolgens wordt die locatie via Pusher verzonden. We maken ook een webpagina met de huidige locatie van de gebruiker op een kaart.

Dit is hoe de app eruit zal zien:

Je vindt de volledige bron van het project in de tutorial GitHub repo.

De app instellen

In de rest van dit bericht richten we ons op het instellen van onze app. Vervolgens zullen we in de volgende post een aantal van de sleutelcode invullen om met ExpoKit te communiceren.

Een pusher-app maken

Als je de services van Pusher in je app wilt gebruiken, moet je een app maken op het dashboard van de Pusher. Eenmaal ingelogd, ga naar je dashboard, klik op Jouw apps en dan Maak een nieuwe app, en voer de naam van de app in:

Zodra de app is gemaakt, gaat u naar App instellingen en controleer de Clientgebeurtenissen inschakelen selectievakje. Hierdoor kunnen we Pusher-gebeurtenissen direct vanuit de app activeren in plaats van vanaf een server. Klik vervolgens op Bijwerken om de wijzigingen op te slaan:

Je kunt de sleutels vinden onder de App-toetsen tab. Die zullen we later nodig hebben, zodra we verbinding maken met de Pusher-app.

Een Google-app maken

Evenzo moeten we een Google-project maken om de Google Maps API en de Geolocation-API te kunnen gebruiken. Ga naar console.developers.google.com en maak een nieuw project:

Ga vervolgens naar het projectdashboard en klik op API's en services inschakelen. Zoeken Google Maps JavaScript API en Google Maps Geocoding API en schakel die in.

Ga vanaf het projectdashboard naar Geloofsbrieven en klik op Aanmeldingsgegevens maken> API-sleutel. Let op de API-sleutel die wordt gegenereerd, omdat we deze later zullen gebruiken.

Een nieuw Expo-project maken

Voer de volgende opdrachten uit in uw werkdirectory:

exp init ocdmom cd ocdmom exp start

Nu is de Expo-app klaar om te testen. Scan gewoon de QR-code met uw Expo-client-app voor iOS of Android.

Codering van de app

Nu zijn we klaar om te beginnen met het coderen van de app. We zullen ons gaan ontwikkelen als een standaard Expo-project en dan zullen we ons loskoppelen van ExpoKit wanneer we aangepaste native-functies moeten gebruiken.

Het genereren van de unieke trackingcode

Wis de inhoud van de App.js bestand in de hoofdmap van de projectdirectory en voeg de volgende imports toe:

import Reageren van 'reageren'; import StyleSheet, Text, View uit 'react native';

We gebruiken ook een aangepast headeronderdeel:

import Header van './components/Header';

Stel in de constructor de unieke code naar de oorspronkelijke staat:

export standaardklasse App breidt React.Component constructor (props) super (rekwisieten); this.state = unique_code: Math.random (). toString (36) .substring (7) .toUpperCase () // genereer een willekeurige reeks; 

De gebruikersinterface van onze app geeft deze unieke code weer.

render () retour (  
  Unieke code  This.state.unique_code   ); 

Eindelijk, hier is de code voor de hoofd (componenten / Header.js) component:

import Reageren van 'reageren'; import StyleSheet, Text, View uit 'react native'; export standaardklasse Header extends React.Component render () return (   This.props.text  );  const styles = StyleSheet.create (header: flex: 1, flexDirection: 'column', alignSelf: 'stretch', paddingTop: 20, paddingBodom: 5, backgroundColor: '# f3f3f3', header_text: fontWeight: 'bold', fontSize: 17, textAlign: 'center');

Conclusie

Dit was het eerste deel van onze tweedelige serie over het loskoppelen van Expo-apps naar ExpoKit. In dit bericht heb je de concepten achter ExpoKit geleerd en ben je begonnen met het opzetten van een project dat de ExpoKit-functionaliteit zal gebruiken. 

In het volgende bericht zullen we de app loskoppelen van ExpoKit en deze blijven coderen zodat we deze op een apparaat kunnen uitvoeren.

Bekijk in de tussentijd een aantal van onze andere berichten over de ontwikkeling van de React Native-app!