React Native este un cadru de aplicații mobile open-source creat de Facebook. Îl puteți utiliza pentru a dezvolta aplicații pentru dispozitive Android și iOS cu o singură bază de cod. React Native alimentează unele dintre cele mai populare aplicații din lume, cum ar fi Instagram și Facebook, iar în această postare vă voi arăta cum să creați prima dvs. aplicație nativă React pentru Android.

exemplu de cod nativ React

codul nativ React pentru un ecran tipic de aplicație mobilă arată astfel:

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

dacă vă uitați atent, veți vedea că React Native folosește o combinație de JavaScript, marcaj HTML și CSS. Acest fragment de cod definește un ecran cu afișaj text și stil.

React Native Development Environments: Expo vs.React Native CLI

există două moduri de a crea o aplicație React Native:

1. Expo CLI
2. React Native CLI

voi vorbi despre avantajele și dezavantajele fiecăruia de mai jos.

Expo CLI

Expo este un cadru open-source și o platformă pentru aplicații universale React care oferă un flux de lucru de dezvoltare a aplicațiilor gestionate. Este un set de instrumente și servicii construite în jurul platformelor React Native și native care ajută la dezvoltarea, construirea, implementarea și iterarea rapidă pe iOS, Android și aplicații web din aceeași bază de cod JavaScript sau TypeScript.

Expo ia departe toate complexitățile asociate cu construirea React aplicații Native. Unele dintre caracteristicile Expo CLI includ:

• API-uri universale care oferă acces la caracteristici cum ar fi camera, hărți, notificări, senzori, haptics, și mult mai mult.
• un serviciu de construire bazat pe cloud care vă oferă binare pregătite pentru app-store și gestionează certificatele.
• over-the-air actualizări care vă permit să actualizați aplicația în orice moment, fără a hassle și întârzierile de depunere la magazin.

React Native CLI

React Native CLI este un mediu de dezvoltare mai simplu și mai simplu. Lucrul bun este că face posibilă construirea de binare de aplicații pe propria mașină, fără a se baza pe un serviciu cloud. Pe de altă parte, configurarea este mult mai complicată—pentru a construi aplicații pentru Android, va trebui să instalați Android Studio și să configurați multe funcții înainte de a începe. Acest proces poate fi un pic complex, dar mediul React Native CLI este mai potrivit pentru dezvoltatorii de aplicații profesioniști.

pentru acest tutorial, vom folosi Expo, deoarece acesta este cel mai simplu mod de a începe să construiți aplicații Native React.

cum funcționează Expo

pentru a utiliza Expo, trebuie mai întâi să instalați aplicația client Expo, care este disponibilă în Play Store (o versiune este disponibilă și în Ios App Store). Aplicația Expo Client vă va permite să rulați aplicația în scopuri de testare în timp real.

puteți codifica aplicația nativă React pe propriul computer cu editorul de text de programare preferat, apoi utilizați Expo CLI pentru a testa sau publica aplicația. În spatele scenei, Expo va împacheta codul dvs. nativ React și îl va pune la dispoziția aplicației client Expo de pe dispozitiv. De asemenea, puteți utiliza Expo CLI pentru a vă publica aplicația și a o pune la dispoziția oricui are clientul Expo sau pentru a construi o versiune independentă a aplicației dvs. care poate fi încărcată în app store și rulată fără a instala clientul Expo.

crearea unei aplicații cu Expo

În acest tutorial, vom folosi Expo CLI pentru a crea aplicația noastră.

cerințe preliminare

pentru a crea o aplicație nativă React cu Expo, trebuie să îndepliniți următoarele:

• nod.js versiunea 12 LTS sau mai mare și Git pe computer
• un dispozitiv Android cu Lollipop (Android 5) sau mai mare
• aplicația client Expo instalat pe dispozitivul Android (descărcați clientul Expo pentru Android din Play Store)
• o înțelegere de bază a ReactJS sau JavaScript

De asemenea, rețineți că computerul de dezvoltare și telefonul trebuie să fie conectat la aceeași rețea fără fir.

descărcare nod.js

vizitați Nodul.js site-ul și descărca cea mai recentă versiune de nod. Node este disponibil pentru sistemele de operare Windows, macOS și Linux. Pur și simplu alegeți sistemul de operare și instalați-l conform instrucțiunilor disponibile pe site.

pentru a verifica dacă nod.js este instalat, deschideți o fereastră terminal și tastați:

node -v

această comandă va afișa versiunea nodului instalat.

Install Expo Client

după ce ați instalat nod, va trebui, de asemenea, să instalați Expo CLI client. Pur și simplu executați următoarea comandă:

 npm install expo-cli --global

pentru utilizatorii macOS și Linux, asigurați-vă că utilizați sudo.

sudo npm install expo-cli --global

ignorați orice avertismente sau erori care apar în procesul de instalare a Expo CLI. După o instalare reușită, ar trebui să vedeți mesajul de mai jos.

creați o aplicație listă de sarcini cu React Native

vom crea o aplicație simplă listă de sarcini care vă permite să introduceți o listă de sarcini de care aveți nevoie pentru a obține făcut și le afișează pe ecran.

crearea unui nou proiect cu Expo

pentru a începe, executați următoarea comandă Expo CLI pentru a crea un nou proiect:

expo init tasklist

tasklist este numele proiectului. Vi se va solicita să alegeți un șablon pentru proiectul dvs. Pentru moment, alegeți șablonul gol, care vă oferă dependențe minime.

expo init comanda creează un folder de proiect și instalează toate dependențele cerute de aplicația React Native.

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

navigați la folderul proiectului și executați următoarea comandă:

cd tasklist-appnpm start

npm start va porni Expo dev tools și deschideți o filă nouă în browserul dvs. care arată astfel:

această fereastră vă permite să rulați aplicația pe un simulator sau pe un dispozitiv conectat.

conectați un dispozitiv

acum, deschideți aplicația client Expo pe dispozitivul dvs. fizic Android și selectați opțiunea Scanare cod QR, așa cum se arată mai jos.

apoi, reveniți la fereastra Expo dev, scanați codul de bare și așteptați finalizarea procesului de construire a pachetului JavaScript. Acest lucru durează de obicei câteva minute. În cazul în care procesul este complet, cererea ar trebui să fie difuzate pe telefon!

structura proiectului

acum că mediul dvs. de dezvoltare este gata, puteți edita codul pentru proiect folosind editorul de cod preferat. Dosarul proiectului arată cam așa:

• active: deține imaginile pentru aplicația
• node_modules: conține toate dependențele pentru proiectul
• App.js: deține codul care face UI și este un fișier esențial

App.js este deschis în captura de ecran de mai sus. Să aruncăm o privire mai atentă. În primul rând, importăm React din react. Apoi importămText șiView componente dinreact-native. De asemenea, importăm Stylesheet, care ajută la styling.

React Native vine cu componente încorporate, cum ar fi<Text> și<View> spre deosebire de componentele HTML standard, cum ar fi<div> și<p>. Componenta<View> este cea mai fundamentală componentă din React Native și este utilizată pentru gruparea altor componente copil—cum ar fi<div> în HTML. Componenta<Text> este utilizată pentru a afișa conținut text pe ecran—cum ar fi<p> în HTML.

în versiunea boilerplate a aplicației.js că Expo creează, există o vizualizare simplă, cu o componentă de text și o bară de stare. Această vizualizare este returnată din funcțiaApp(). Constantastyles conține câteva CSS de bază pentru a stiliza vizualizarea.

apoi, să adăugăm câteva componente și stiluri noi în aplicație!

crearea UI App

deschideți aplicația.fișier js și introduceți următorul cod.

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

codul de mai sus adaugă o simplă introducere de text și un buton pentru adăugarea de noi sarcini. Folosim stilul CSS flexbox pentru a poziționa componentele unul lângă celălalt.

adăugați manipularea evenimentelor

pentru a obține intrarea utilizatorului, importăm mai întâi funcțiauseState() dinreact și o folosim pentru a actualiza stareanewTask() șisetnewTask() funcții. Deoarece utilizatorul nu a tastat încă nimic, starea inițială va fi goală. Adăugați următorul cod în partea de sus a funcției App(), chiar deasupra return:

const = useState('');

definim apoi taskInputHandler, care ascultă modificarea intrării și actualizează conținutul a funcției setNewTask(). Adăugați aceste linii la App() funcția următoare:

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

acum înregistrăm acest handler de intrare cu TextInput componentă. Actualizați componenta TextInput astfel încât să pară următoarele.

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

acum trebuie să ne ocupăm de apăsarea butoanelor. Când utilizatorul apasă butonul+, dorim să adăugăm noua sarcină la o listă.

În primul rând, vom defini starea noastră pentru lista de sarcini:

 const = useState();

apoi, definim oaddTaskHandler funcție pentru a adăuga noua activitate (Găsită înnewTask stare) la listă.

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

și înregistrați acel handler de evenimente cu componenta<Button> :

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

În cele din urmă, vom adăuga o nouă vizualizare pentru a afișa toate sarcinile din lista pe care am creat-o. Acest lucru se întâmplă imediat după vizualizarea containerului de intrare, dar încă în interiorul vizualizării containerului principal.

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

codul sursă complet pentru App.js

codul complet pentru App.js este prezentat mai jos. Comparați-l cu ceea ce aveți.

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

concluzie

În acest tutorial, ați învățat cum să creați o aplicație nativă React cu Expo.

React Native este un cadru excelent și o platformă populară atât pentru dezvoltatori, cât și pentru companii. Aplicațiile create cu React Native sunt garantate să funcționeze fără probleme pe orice platformă sau sistem. React Native salvează, de asemenea, munca de dezvoltare, permițându-vă să codificați aplicația o dată și să o rulați pe orice platformă mobilă.

șabloane Premium pentru aplicații Mobile de la CodeCanyon

CodeCanyon este o piață online care are sute de șabloane pentru aplicații mobile—pentru Android, iOS, React Native și Ionic. Puteți salva zile, chiar luni, de efort folosind una dintre ele.

fie că sunteți doar la început cu React Native, sau sunt un dezvoltator condimentată, un șablon React Native app este o modalitate foarte bună de a economisi timp și efort pe următorul proiect app.

Dacă aveți probleme să decideți ce șablon pe CodeCanyon este potrivit pentru dvs., aceste articole ar trebui să vă ajute:

• 
  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