React Native er en open source-mobilapplikationsramme oprettet af Facebook. Du kan bruge den til at udvikle applikationer til Android-og iOS-enheder med en enkelt kodebase. React Native styrker nogle af verdens mest populære apps, såsom Instagram og Facebook, og i dette indlæg viser jeg dig, hvordan du opretter din første React Native app til Android.

eksempel på React Native Code

React Native-koden til en typisk mobilappskærm ser sådan ud:

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

Hvis du ser nøje, vil du se, at React Native bruger en kombination af JavaScript, HTML-lignende markup og CSS. Dette kodestykke definerer en skærm med tekstvisning og styling.

React Native udviklingsmiljøer: ekspo vs. React Native CLI

Der er to måder at oprette en React Native app på:

1. React Native cli

Jeg vil tale om fordele og ulemper ved hver nedenfor.

ekspo CLI

ekspo er en open source-ramme og en platform til universelle React-applikationer, der giver en administreret appudviklingsarbejdsproces. Det er et sæt værktøjer og tjenester bygget op omkring React Native og native platforme, der hjælper med at udvikle, opbygge, implementere og hurtigt gentage på iOS -, Android-og internetapps fra samme JavaScript-eller TypeScript-kodebase.

ekspo fjerner alle de kompleksiteter, der er forbundet med at opbygge React Native apps. Nogle af funktionerne i ekspo CLI inkluderer:

• Universal API ‘ er, der giver adgang til funktioner som kamera, kort, meddelelser, sensorer, Haptik og meget mere.
• en cloud-baseret build service, der giver dig App-store-klar binære filer og håndterer certifikater.
• over-the-air opdateringer, som giver dig mulighed for at opdatere din app til enhver tid uden besværet og forsinkelserne ved at indsende til butikken.

React Native CLI

React Native CLI er et mere grundlæggende og bare-metal udviklingsmiljø. Den gode ting er, at det gør det muligt at opbygge app-binære filer på din egen maskine uden at stole på en skytjeneste. På den anden side er opsætningen meget mere kompliceret—for at opbygge apps til Android skal du installere Android Studio og konfigurere mange funktioner, før du kommer i gang. Denne proces kan være lidt kompleks, men React Native CLI-miljøet er mere velegnet til professionelle appudviklere.

til denne tutorial bruger vi ekspo, da det er den nemmeste måde at komme i gang med at opbygge React Native apps.

Sådan fungerer ekspo

for at bruge ekspo skal du først installere ekspo-klientappen, som er tilgængelig i Play Store (en version er også tilgængelig i iOS App Store). Appen giver dig mulighed for at køre appen til testformål i realtid.

Du kan kode din React Native app på din egen computer med din foretrukne programmering teksteditor, og derefter bruge ekspo CLI til at teste eller udgive din app. Bag kulisserne pakker vi din React Native-kode og gør den tilgængelig for appen på din enhed. Du kan også bruge Messecli til at udgive din app og gøre den tilgængelig for alle med Messeclienten eller til at oprette en enkeltstående version af din app, der kan uploades til app store og køre uden at installere Messeclienten.

oprettelse af en App med ekspo

i denne vejledning bruger vi ekspo CLI til at oprette vores app.

forudsætninger

for at oprette en React Native app med ekspo skal du opfylde følgende:

• Node.js version 12 LTS eller højere og Git på din computer
• en Android-enhed med Lollipop (Android 5) eller højere
• programmet til Udstillingsklient installeret på din Android-enhed (Hent Udstillingsklienten til Android fra Play Butik)
• en grundlæggende forståelse af ReactJS eller JavaScript

Bemærk også, at din udviklingscomputer og telefon skal være tilsluttet det samme trådløse netværk.

Hent Node.JS

besøg noden.js hjemmeside og hente den nyeste version af Node. Node er tilgængelig for operativsystemer til macOS, macOS og MacOS. Du skal blot vælge dit operativsystem og installere det i henhold til instruktionerne på hjemmesiden.

for at kontrollere, om Node.JS er installeret, Åbn et terminalvindue og skriv:

node -v

denne kommando viser den installerede Node-version.

installer ekspo-klient

når du har installeret Node, skal du også installere ekspo-CLI-klienten. Du skal blot køre følgende kommando:

 npm install expo-cli --global

for macOS-brugere skal du sikre dig, at du brugersudo.

sudo npm install expo-cli --global

Ignorer eventuelle advarsler eller fejl, der opstår i processen med at installere ekspo CLI. Efter en vellykket installation skal du se meddelelsen nedenfor.

Opret en opgaveliste-App med React Native

Vi opretter en enkel opgaveliste-app, der giver dig mulighed for at indtaste en liste over opgaver, du har brug for for at få udført, og viser dem på skærmen.

Opret et nyt projekt med ekspo

for at komme i gang skal du køre følgende ekspo CLI-kommando for at oprette et nyt projekt:

expo init tasklist

tasklist er projektets navn. Du bliver bedt om at vælge en skabelon til dit projekt. Vælg nu den tomme skabelon, som giver dig minimale afhængigheder.

kommandoenexpo init opretter en projektmappe og installerer alle de afhængigheder, der kræves af React Native-appen.

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

Naviger til projektmappen og kør følgende kommando:

cd tasklist-appnpm start

npm start vil starte se sådan ud:

dette vindue giver dig mulighed for at køre din app på en simulator eller en tilsluttet enhed.

Tilslut en enhed

åbn nu appen ekspo-klient på din fysiske Android-enhed, og vælg indstillingen Scan kr-kode, som vist nedenfor.

gå derefter tilbage til vinduet ekspo dev, scan stregkoden og vent på, at JavaScript bundle-byggeprocessen er afsluttet. Dette tager normalt et par minutter. Når processen er afsluttet, skal applikationen køre på din telefon!

projektstruktur

nu hvor dit udviklingsmiljø er klar, kan du redigere koden til projektet ved hjælp af din foretrukne kodeditor. Projektmappen ser sådan ud:

• aktiver: indeholder billederne til appen
• node_modules: indeholder alle afhængigheder for projektet
• App.js: indeholder koden, der gengiver brugergrænsefladen og er en vigtig fil

App.js er åben i skærmbilledet ovenfor. Lad os se nærmere på. Først importerer vi Reactfra react. Vi importerer derefterText ogView komponenter frareact-native. Vi importerer også Stylesheet, som hjælper med styling.

React Native leveres med indbyggede komponenter som<Text> og<View> i modsætning til standard HTML-komponenter, som<div> og<p><View> komponenten er den mest grundlæggende komponent i React Native og bruges til gruppering af andre underordnede komponenter—som <div> i HTML. Komponenten<Text> bruges til at vise tekstindhold på skærmen—som<p> i HTML.

i standardversionen af App.js at ekspo skaber, der er en simpel visning med en tekst komponent og en statuslinje. Denne visning returneres fra funktionenApp()styles konstant indeholder nogle grundlæggende CSS til at style visningen.

næste, lad os tilføje nogle nye komponenter og stilarter til app!

Opret App UI

Åbn appen.JS fil og indtast følgende kode.

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

koden ovenfor tilføjer en simpel tekstindtastning og en knap til tilføjelse af nye opgaver. Vi bruger CSS fleksboks styling til at placere komponenterne ved siden af hinanden.

Tilføj hændelseshåndtering

for at få brugerinput importerer vi førstuseState() funktionen frareact og bruger den til at opdatere tilstanden fornewTask() ogsetnewTask() funktioner. Da brugeren ikke har skrevet noget endnu, vil den oprindelige tilstand være tom. Tilføj følgende kode til toppen af App() – funktionen, lige over return:

const = useState('');

Vi definerer derefter taskInputHandler, som lytter til ændringen i input og opdaterer indholdet af setNewTask() funktion. Tilføj disse linjer til App() funktion næste:

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

nu registrerer vi denne inputhåndterer med TextInput komponent. Opdater dinTextInput komponent, så det ligner følgende.

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

nu skal vi håndtere knaptryk. Når brugeren trykker på knappen+, vil vi tilføje den nye opgave til en liste.

først definerer vi vores tilstand for listen over opgaver:

 const = useState();

dernæst definerer vi en addTaskHandler funktion for at tilføje den nye opgave (findes i newTask tilstand) til listen.

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

og Registrer den hændelseshandler med <Button> komponent:

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

endelig tilføjer vi en ny visning for at vise alle opgaverne på listen, vi har oprettet. Dette går lige efter inputbeholdervisningen, men stadig inde i hovedbeholdervisningen.

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

komplet kildekode til App.js

den fulde kode for App.js er vist nedenfor. Sammenlign det med hvad du har.

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

konklusion

i denne vejledning lærte du, hvordan du opretter en React Native app med ekspo.

React Native er en fantastisk ramme og en populær platform for både udviklere og virksomheder. Apps oprettet med React Native fungerer garanteret problemfrit på enhver platform eller system. React Native sparer også udviklingsarbejde ved at lade dig kode din app en gang og køre den på enhver mobil platform.

Premium mobile App skabeloner fra CodeCanyon

CodeCanyon er en online markedsplads, der har hundredvis af mobile app skabeloner—til Android, iOS, React Native og Ionic. Du kan spare dage, endda måneder, af indsats ved at bruge en af dem.

uanset om du lige er kommet i gang med React Native eller er en erfaren udvikler, er en React Native App-skabelon en fantastisk måde at spare tid og kræfter på dit næste app-projekt.

Hvis du har problemer med at beslutte, hvilken skabelon på CodeCanyon der passer til dig, skal disse artikler hjælpe dig med at:

• 
  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