React Native is een open-source mobiele applicatie framework gemaakt door Facebook. U kunt het gebruiken om applicaties te ontwikkelen voor Android-en iOS-apparaten met een enkele codebase. Instagram en Facebook, en in dit bericht zal ik je laten zien hoe je je eerste React Native app voor Android maakt.

voorbeeld van ‘React Native Code’

De ‘React Native code’ voor een typisch scherm van een mobiele app ziet er zo uit:

import * as React from 'react';import {Text, View, Stylesheet} from 'react-native';const ExampleScreen = (props) { return ( <View style = {styles.containerStyling}> <Text style = {styles.textStyling}> Hello world!</Text> </View> );}const styles = Stylesheet.create({ containerStyling:{ background: '#0000FF' }, textStyling :{ marginBottom :20, color:'#FFF' }});export default ExampleScreen

Als u goed kijkt, zult u zien dat React Native een combinatie van JavaScript, HTML-achtige opmaak en CSS gebruikt. Dit codefragment definieert een scherm met een tekstweergave en styling.

React Native Development Environments: Expo vs. React Native CLI

Er zijn twee manieren om een React Native app te maken:

1. Expo CLI
2. React Native CLI

Ik zal het hieronder hebben over de voor-en nadelen van elk.

Expo CLI

Expo is een open-source framework en een platform voor universal React-toepassingen dat een beheerde app development workflow geeft. Het is een set van tools en diensten gebouwd rond React Native en native platforms die helpen bij het ontwikkelen, bouwen, implementeren en snel itereren op iOS, Android en web apps van dezelfde JavaScript of TypeScript codebase.

Expo neemt alle complexiteiten weg die geassocieerd worden met het bouwen van React Native apps. Enkele kenmerken van de Expo CLI zijn::

• Universele API ‘ s die toegang bieden tot functies zoals camera, kaarten, meldingen, sensoren, haptics en nog veel meer.
• een cloudgebaseerde build-service die u binaries geeft die geschikt zijn voor app-store en certificaten afhandelt.
• updates via de ether waarmee u uw app op elk gewenst moment kunt updaten zonder het gedoe en de vertragingen bij het verzenden naar de winkel.

React Native CLI

De React Native CLI is een meer basische en bare-metal ontwikkelomgeving. Het goede ding is dat het maakt het mogelijk om app binaries te bouwen op uw eigen machine, zonder te vertrouwen op een cloud service. Aan de andere kant, de setup is veel ingewikkelder—om apps te bouwen voor Android, je nodig hebt om Android Studio te installeren en configureren vele functies voordat u aan de slag. Dit proces kan een beetje complex, maar de React Native CLI omgeving is meer geschikt voor professionele app-ontwikkelaars.

voor deze tutorial gebruiken we Expo omdat dat de makkelijkste manier is om te beginnen met het bouwen van React Native apps.

Hoe werkt Expo

om Expo te gebruiken, moet u eerst de Expo Client app installeren, die beschikbaar is in de Play Store (een versie is ook beschikbaar in de iOS App Store). Met de Expo Client app kun je de app in realtime uitvoeren voor testdoeleinden.

u kunt uw React Native app coderen op uw eigen computer met uw favoriete programmeertekstbewerker, en vervolgens de Expo CLI gebruiken om uw app te testen of te publiceren. Achter de schermen zal Expo uw React Native code verpakken en beschikbaar maken voor de Expo Client app op uw apparaat. U kunt de Expo CLI ook gebruiken om uw app te publiceren en beschikbaar te maken voor iedereen met de Expo Client, of om een standalone versie van uw app te bouwen die kan worden geüpload naar de app store en uitgevoerd zonder de Expo Client te installeren.

een App Maken Met Expo

In deze tutorial zullen we de Expo CLI gebruiken om onze app te maken.

Prerequisites

om een React Native app met Expo te maken, moet u aan het volgende voldoen:

• knooppunt.js versie 12 LTS of hoger en Git op uw computer
• een Android apparaat met Lollipop (Android 5) of hoger
• de Expo client applicatie geïnstalleerd op uw Android apparaat (download de Expo client voor Android uit de Play Store)
• een basiskennis van ReactJS of JavaScript

merk ook op dat uw ontwikkelcomputer en telefoon moeten zijn verbonden met hetzelfde draadloze netwerk.

Downloadnode.js

bezoek het knooppunt.js website en download de nieuwste versie van Node. Node is beschikbaar voor Windows, macOS en Linux-besturingssystemen. Kies gewoon uw besturingssysteem en installeer het volgens de instructies die beschikbaar zijn op de site.

om te controleren of knooppunt.js is geïnstalleerd, open een terminalvenster en typ:

node -v

Dit commando zal de geïnstalleerde Knooppuntversie tonen.

Expo Client installeren

nadat u Node hebt geïnstalleerd, moet u ook de Expo CLI client installeren. Voer het volgende commando uit:

 npm install expo-cli --global

voor macOS-en Linux-gebruikers moet u sudogebruiken.

sudo npm install expo-cli --global

Negeer waarschuwingen of fouten die optreden tijdens het installeren van de Expo CLI. Na een succesvolle installatie, moet u het bericht hieronder te zien.

Maak een takenlijst-App met React Native

We maken een eenvoudige takenlijst-app waarmee u een lijst met taken kunt invoeren die u moet uitvoeren en deze op het scherm kunt weergeven.

Maak een nieuw Project aan met Expo

start het volgende Expo CLI commando om een nieuw project aan te maken:

expo init tasklist

tasklist is de naam van het project. U wordt gevraagd om een sjabloon voor uw project te kiezen. Voor nu, kies de lege sjabloon, die u minimale afhankelijkheden geeft.

het commando expo init maakt een projectmap aan en installeert alle afhankelijkheden die vereist zijn door de Native App React.

expo init tasklist-app? Choose a template: expo-template-blank📦 Using npm to install packages. You can pass --yarn to use Yarn instead.✔ Downloaded and extracted project files.✔ Installed JavaScript dependencies.✅ Your project is ready!To run your project, navigate to the directory and run one of the following npm commands.- cd tasklist-app- npm start # you can open iOS, Android, or web from here, or run them directly with the commands below.- npm run android- npm run ios # requires an iOS device or macOS for access to an iOS simulator- npm run web

Navigeer naar de projectmap en voer het volgende commando uit:

cd tasklist-appnpm start

npm start start de Expo dev tools en open een nieuwe tab in je browser, die er als volgt uitziet:

Dit venster kunt u uw app op een simulator of een aangesloten apparaat.

Connect a Device

open nu de Expo client app op uw fysieke Android device en selecteer de Scan QR Code optie, zoals hieronder getoond.

ga vervolgens terug naar het Expo-dev-venster, scan de barcode en wacht tot het Javascript-bundel-bouwproces is voltooid. Dit duurt meestal een paar minuten. Wanneer het proces is voltooid, de toepassing moet worden uitgevoerd op uw telefoon!

projectstructuur

nu uw ontwikkelomgeving klaar is, kunt u de code voor het project bewerken met behulp van de gewenste code-editor. De projectmap ziet er ongeveer zo uit:

• activa: bevat de images voor de app
• node_modules: bevat alle afhankelijkheden voor het project
• App.js: bevat de code die de UI maakt en is een essentieel bestand

App.js is geopend in de screenshot hierboven. Laten we eens beter kijken. Eerst importeren we React van react. Vervolgens importeren we deText enView componenten vanreact-native. We importeren ook Stylesheet, wat helpt bij het stylen.

React Native wordt geleverd met ingebouwde componenten zoals <Text> en <View> In tegenstelling tot standaard HTML-componenten, zoals <div> en <p>. De<View> component is de meest fundamentele component in React Native en wordt gebruikt voor het groeperen van andere onderliggende componenten—zoals<div> in HTML. De component <Text> wordt gebruikt om tekstinhoud op het scherm weer te geven—zoals <p> in HTML.

In de boilerplate-versie van App.js die Expo creëert, is er een eenvoudige weergave met een tekstcomponent en een statusbalk. Deze weergave wordt geretourneerd door de functie App(). De constantestyles bevat enkele basis CSS om de weergave op te stylen.

volgende, laten we enkele nieuwe componenten en stijlen toe te voegen aan de app!

maak de app UI

Open De App.js bestand en voer de volgende code.

import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} /> <Button title = "+"/> </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center', bottom:20 },});

de bovenstaande code voegt een eenvoudige tekstinvoer en een knop toe voor het toevoegen van nieuwe taken. We gebruiken CSS flexbox styling om de componenten naast elkaar te plaatsen.

Add Event Handling

om de input van de gebruiker te krijgen, importeren we eerst de useState() functie van react en gebruiken het om de status van de newTask() en setnewTask() functies bij te werken. Omdat de gebruiker nog niets heeft getypt, zal de initiële status leeg zijn. Voeg de volgende code toe aan de bovenkant van de App() functie, net boven return:

const = useState('');

We definiëren dan de taskInputHandler, die luistert naar de verandering in de invoer en de inhoud van de functie. Voeg deze regels toe aan de App() functie volgende:

 const taskInputHandler = (enteredText) => { setNewTask(enteredText); };

nu registreren we deze invoerhandler met de TextInput component. Werk uw TextInput component bij zodat het er als volgt uitziet.

 <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} />

nu moeten we knopdrukken verwerken. Wanneer de gebruiker op de + knop drukt, willen we de nieuwe taak aan een lijst toevoegen.

eerst definiëren we onze status voor de lijst met taken:

 const = useState();

vervolgens definiëren we een addTaskHandler functie om de nieuwe taak (gevonden in de newTask status) toe te voegen aan de lijst.

 const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); };

en registreer die event handler met de<Button> component:

 <Button title = "+" onPress = {addTaskHandler} />

ten slotte voegen we een nieuwe weergave toe om alle taken te tonen in de lijst die we hebben gemaakt. Dit gaat net na de invoercontainerweergave, maar nog steeds in de hoofdcontainerweergave.

 <View> {appTasks.map((task) => <Text>{task}</Text>)} </View>

volledige broncode voor App.js

de volledige code voor App.js is hieronder weergegeven. Vergelijk het met wat je hebt.

 import { StatusBar } from 'expo-status-bar';import React , {useState} from 'react';import { StyleSheet, Text, View, TextInput, Button } from 'react-native';export default function App() { const = useState(''); const = useState(); const taskInputHandler = (enteredText) => { setnewTask(enteredText); }; const addTaskHandler = () =>{ appTask(currentTask => ); console.log(newTask); }; return ( <View style= {styles.container}> <View style = {styles.inputContainer}> <TextInput placeholder = "Task List" style = {styles.input} onChangeText = {taskInputHandler} value = {newTask} /> <Button title = "+" onPress = {addTaskHandler} /> </View> <View> {appTasks.map((task) => <Text>{task}</Text>)} </View> </View> );}const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, input :{ borderColor:"black", borderWidth:1 , padding :20, }, inputContainer :{ flexDirection :'row', justifyContent :'space-between', alignContent:'center, bottom:20 },});

conclusie

In deze tutorial hebt u geleerd hoe u een React Native app maakt met Expo.

React Native is een geweldig framework en een populair platform voor zowel ontwikkelaars als bedrijven. Apps gemaakt met React Native werken gegarandeerd soepel op elk platform of systeem. React Native bespaart ook ontwikkelingswerk door u te laten coderen uw app een keer en draaien op elk mobiel platform.

Premium Mobile App Templates van CodeCanyon

CodeCanyon is een online marktplaats met honderden mobiele app templates—voor Android, iOS, React Native en Ionic. U kunt dagen, zelfs maanden, van de inspanning te besparen door het gebruik van een van hen.

of u nu net begonnen bent met React Native, of een doorgewinterde ontwikkelaar bent, een React Native app template is een geweldige manier om tijd en moeite te besparen op uw volgende app project.

Als u moeite hebt om te beslissen welke sjabloon op CodeCanyon geschikt is voor u, moeten deze artikelen helpen:

• 
  Mobile App
  21+ Best React Native App Templates of 2021 (Including 5 Free)
  Franc Lucas
• 
  Ionic
  15 Stunning Ionic App Templates and Ionic Themes
  Franc Lucas
• 
  React
  9 React Native App Templates for You to Study and Use
  Franc Lucas