React Native Er en åpen kildekode mobil rammeverk laget Av Facebook. Du kan bruke den til å utvikle applikasjoner For Android og iOS-enheter med en enkelt kodebase. React Native driver noen av verdens mest populære apper, For Eksempel Instagram og Facebook, og i dette innlegget vil jeg vise deg hvordan du lager Din første React Native app for Android.

Eksempel På React Native Code

React native code for en typisk mobil app skjermen ser slik ut:

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øye etter, vil Du se At React Native bruker En kombinasjon Av JavaScript, HTML-lignende markering og CSS. Denne kodebiten definerer en skjerm med tekstvisning og styling.

React Native Development Environments: Expo vs. React Native Cli

Det er to måter å lage En React Native app:

1. Expo Cli
2. React Native Cli

jeg skal snakke om fordeler og ulemper med hver nedenfor.

Expo Cli

Expo Er et rammeverk med åpen kildekode og en plattform for universelle React-applikasjoner som gir en arbeidsflyt for administrert apputvikling. Det er et sett med verktøy og tjenester bygget rundt React Native og native plattformer som bidrar til å utvikle, bygge, distribuere og raskt iterere på iOS, Android og web apps fra samme JavaScript eller TypeScript kodebase.Expo tar bort alle kompleksiteten forbundet med å bygge React Native apps. Noen av funksjonene I Expo CLI inkluderer:Universelle Apier som gir tilgang til funksjoner som kamera, kart, varsler, sensorer, haptikk og mye mer.

en skybasert bygge tjeneste som gir deg app-store-klar binærfiler og håndterer sertifikater.

Over-the-air oppdateringer som lar deg oppdatere appen din når som helst uten problemer og forsinkelser ved å sende til butikken.

React Native CLI

React Native cli er et mer grunnleggende og bare-metall utviklingsmiljø. Det gode er at det gjør det mulig å bygge app binærfiler på din egen maskin, uten å stole på en skytjeneste. På den annen side er oppsettet mye mer komplisert – for å bygge apper For Android må du installere Android Studio og konfigurere mange funksjoner før du kommer i gang. Denne prosessen kan være litt kompleks, Men React Native cli-miljøet er mer egnet til profesjonelle apputviklere.For denne opplæringen bruker Vi Expo siden det er den enkleste måten å komme i gang med å bygge React Native apps.

Hvordan Expo Fungerer

For å bruke Expo må du først installere Expo-Klientappen, som er tilgjengelig På Play-Butikken (en versjon er også tilgjengelig på iOS App Store). Expo Client app vil tillate deg å kjøre programmet for testformål i sanntid.

du kan kode Din React Native app på din egen datamaskin med din favoritt programmering tekst editor, og deretter bruke Expo CLI å teste eller publisere din app. Bak kulissene, Vil Expo pakke Din React Native kode og gjøre den tilgjengelig For Expo Klient app på enheten. Du kan også bruke Expo CLI til å publisere appen din og gjøre den tilgjengelig for Alle Med Expo-Klienten, eller å bygge en frittstående versjon av appen din som kan lastes opp til app store og kjøre uten å installere Expo-Klienten.

Opprette En App Med Expo

i denne opplæringen vil vi bruke Expo CLI til å lage vår app.

Forutsetninger

for å opprette En React Native app Med Expo, må du oppfylle følgende:

• Node.js versjon 12 LTS eller høyere Og Git på datamaskinen
• En Android-enhet Med Lollipop (Android 5) eller høyere
• Expo klientprogrammet installert på Android-enheten din (last Ned Expo-klienten For Android Fra Play-Butikken)
• en grunnleggende forståelse Av ReactJS eller JavaScript

vær også oppmerksom på at utviklingsdatamaskinen og telefonen må være koblet til samme trådløse nettverk.

Last Ned Node.js

Besøk Noden.js nettsted og laste ned den nyeste versjonen Av Node. Node er tilgjengelig For windows, macOS og Linux operativsystemer. Bare velg operativsystemet og installer det i henhold til instruksjonene som er tilgjengelige på nettstedet.

for å sjekke Om Node.js er installert, åpne et terminalvindu og skriv:

node -v

denne kommandoen viser Den installerte Nodeversjonen.

Installer Expo Client

Etter at Du har installert Node, må du også installere Expo cli-klienten. Bare kjør følgende kommando:

 npm install expo-cli --global

for macOS og Linux-brukere, sørg for at du bruker sudo.

sudo npm install expo-cli --global

Ignorer eventuelle advarsler eller feil som oppstår i prosessen med å installere Expo CLI. Etter en vellykket installasjon, bør du se meldingen nedenfor.

Lag En Gjøremålsliste App Med React Native

Vi vil lage en enkel gjøremålsliste app som lar deg legge inn en liste over oppgaver du trenger for å få gjort og viser dem på skjermen.

Opprett Et Nytt Prosjekt Med Expo

for å komme i gang, kjør Følgende Expo cli kommando for å opprette et nytt prosjekt:

expo init tasklist

tasklist er navnet på prosjektet. Du vil bli bedt om å velge en mal for prosjektet. For nå, velg den tomme malen, som gir deg minimal avhengigheter.

kommandoenexpo init oppretter en prosjektmappe og installerer alle avhengighetene Som Kreves av 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 prosjektmappen og kjør følgende kommando:

cd tasklist-appnpm start

npm startvil starte Expo i nettleseren din som ser slik ut:

dette vinduet lar deg kjøre appen din på en simulator eller en tilkoblet enhet.

Koble Til En Enhet

nå åpner Expo client app på din fysiske Android-enhet og velg Scan QR Code alternativet, som vist nedenfor.

neste, gå tilbake Til Expo dev vinduet, skanne strekkoden, og vente På JavaScript bunt byggeprosessen for å fullføre. Dette tar vanligvis et par minutter. Når prosessen er fullført, bør programmet kjøre på telefonen!

Prosjektstruktur

nå som utviklingsmiljøet ditt er klart, kan du redigere koden for prosjektet ved hjelp av din foretrukne kodeditor. Prosjektmappen ser noe ut som dette:

• eiendeler: holder bildene for appen
• node_modules: inneholder alle avhengigheter for prosjektet
• App.js: holder koden som gjør BRUKERGRENSESNITTET og Er En viktig fil

App.js er åpen i skjermbildet ovenfor. La oss ta en nærmere titt. Først importerer vi React fra react. Vi importerer deretter Text og View komponenter fra react-native. Vi importerer også Stylesheet, som hjelper med styling.

React Native kommer med innebygde komponenter som <Text> og <View> i motsetning til standard HTML-komponenter, som <div> og <p><View> komponenten er den mest grunnleggende komponenten I React Native og brukes til å gruppere andre barnekomponenter—som<div> I HTML. <Text> komponenten brukes til å vise tekstinnhold på skjermen-som<p> I HTML.

I standardversjonen Av Appen.js Som Expo skaper, det er en enkel visning med en tekstkomponent og en statuslinje. Denne visningen returneres fraApp() – funksjonen. Denstyles konstant inneholder noen grunnleggende CSS å style visningen.

Neste, la oss legge til noen nye komponenter og stiler til app!

Opprett App UI

Åpne Appen.js fil og skriv inn 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 legger til en enkel skriving og en knapp for å legge til nye oppgaver. VI bruker CSS flexbox styling til å plassere komponentene ved siden av hverandre.

Legg Til Hendelseshåndtering

for å få brukerinngangen importerer vi førstuseState() – funksjonen frareact og bruker den til å oppdatere tilstanden tilnewTask() ogsetnewTask() funksjoner. Siden brukeren ikke har skrevet noe ennå, vil den opprinnelige tilstanden være tom. Legg til følgende kode øverst i App() – funksjonen, like over return:

const = useState('');

vi definerer taskInputHandler, som lytter til endringen i inngangen og oppdaterer innholdet av setNewTask() – funksjonen. Legg disse linjene tilApp() funksjonen neste:

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

nå registrerer vi denne inngangsbehandleren medTextInput komponenten. Oppdater TextInput komponent slik at det ser ut som følgende.

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

nå må vi håndtere knappetrykk. Når brukeren trykker på + – knappen, vil vi legge til den nye oppgaven i en liste.

først definerer vi vår tilstand for oppgavelisten:

 const = useState();

neste definerer vi en addTaskHandler funksjon for å legge til den nye oppgaven (funnet i newTask tilstand) til listen.

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

og registrer hendelsesbehandleren med<Button> – komponenten:

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

Til Slutt legger vi til en ny visning for å vise alle oppgavene i listen vi har opprettet. Dette går like etter inngangsbeholdervisningen, men fortsatt inne i hovedbeholdervisningen.

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

Komplett Kildekode For App.js

den fulle koden For App.js er vist nedenfor. Sammenlign det med det 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 },});

Konklusjon

i denne opplæringen lærte du hvordan du lager En React Native app med Expo.

React Native Er et flott rammeverk og en populær plattform for både utviklere og bedrifter. Apper som er opprettet Med React Native, vil garantert fungere problemfritt på alle plattformer eller systemer. React Native sparer også utviklingsarbeid ved å la deg kode appen din en gang og kjøre den på en hvilken som helst mobil plattform.

Premium Mobile App Maler Fra CodeCanyon

CodeCanyon er en online markedsplass som har hundrevis av mobile app maler-For Android, iOS, React Native, Og Ionic. Du kan spare dager, til og med måneder, med innsats ved å bruke en av dem.

enten Du nettopp har begynt Med React Native, eller er en erfaren utvikler, Er En React Native app-mal en fin måte å spare tid og krefter på ditt neste appprosjekt.

hvis du har problemer med å bestemme hvilken mal På CodeCanyon er riktig for deg, bør disse artiklene hjelpe:

• 
  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