React Native egy nyílt forráskódú mobil alkalmazás keret által létrehozott Facebook. Androidos és iOS-es készülékekre is lehet vele alkalmazásokat fejleszteni egyetlen kódbázissal. A React Native a világ legnépszerűbb alkalmazásai közül néhány, például az Instagram és a Facebook, ebben a bejegyzésben pedig megmutatom, hogyan lehet létrehozni az első React natív alkalmazást Androidra.

példa a React natív kódra

egy tipikus mobilalkalmazás képernyő React natív kódja így néz ki:

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

ha alaposan megnézed, látni fogod, hogy a React Native JavaScript, HTML-szerű jelölés és CSS kombinációt használ. Ez a kódrészlet egy szöveges kijelzővel és stílussal rendelkező képernyőt határoz meg.

Reagálni, Anyanyelvi fejlesztő Környezet: Expo vs Reagálni Natív CLI

két módja Van, hogy hozzon létre egy Reagálni Natív alkalmazás:

1. Expo CLI
2. Reagálni Natív CLI

fogok beszélni az előnyök, hátrányok, a minden alatt.

Expo CLI

Az Expo egy nyílt forráskódú keretrendszer és egy univerzális React alkalmazások platformja, amely felügyelt alkalmazásfejlesztési munkafolyamatot biztosít. Ez egy sor eszközök és szolgáltatások köré épül React natív és natív platformok, amelyek segítenek fejleszteni, építeni, telepíteni, és gyorsan iterálni iOS, Android, és webes alkalmazások az azonos JavaScript vagy TypeScript codebase.

Az Expo elveszi a React natív alkalmazások építésével kapcsolatos összes bonyolultságot. Az Expo CLI néhány jellemzője a következők:

• univerzális API-k, amelyek hozzáférést biztosítanak olyan funkciókhoz, mint a kamera, térképek, értesítések, érzékelők, haptikák stb.
• egy felhőalapú build szolgáltatás, amely app-store-ra kész binárisok segítségével kezeli a tanúsítványokat.
• Over-the-air frissítések, amelyek lehetővé teszik, hogy frissítse az alkalmazást bármikor anélkül, hogy a szóváltás, késések benyújtása a boltba.

React Native CLI

a React Native CLI egy alap-és bare-metal fejlesztői környezet. A jó dolog az, hogy lehetővé teszi app binárisok készítését a saját gépére anélkül, hogy felhőszolgáltatásra támaszkodna. Másrészt, a beállítás sokkal bonyolultabb—, hogy építsenek alkalmazásokat az Android, akkor telepíteni kell az Android Studio és konfigurálja számos funkciót, mielőtt elkezdené. Ez a folyamat egy kicsit összetett lehet, de a React natív CLI környezet jobban megfelel a professzionális alkalmazásfejlesztőknek.

ehhez a bemutatóhoz az Expo-t fogjuk használni, mivel ez a legegyszerűbb módja a React natív alkalmazások építésének.

hogyan működik az Expo

Az Expo használatához először telepítenie kell az Expo kliens alkalmazást, amely elérhető a Play Áruházban (a verzió az iOS App Store-ban is elérhető). Az Expo Client alkalmazás lehetővé teszi az alkalmazás valós idejű futtatását tesztelési célokra.

a saját számítógépén kódolhatja React natív alkalmazását kedvenc programozási szövegszerkesztőjével, majd az Expo CLI segítségével tesztelheti vagy közzéteheti alkalmazását. A színfalak mögött az Expo csomagolja a React natív kódját, majd elérhetővé teszi az Expo kliens alkalmazás számára a készüléken. Az Expo CLI segítségével közzéteheti az alkalmazást, elérhetővé teheti bárki számára az Expo klienssel, vagy elkészítheti az alkalmazás önálló verzióját, amely feltölthető az app store-ba, és futtatható az Expo kliens telepítése nélkül.

alkalmazás létrehozása az Expo

segítségével ebben az oktatóanyagban az Expo CLI-t használjuk alkalmazásunk létrehozásához.

előfeltételek

egy React natív alkalmazás létrehozásához az Expo-val meg kell felelnie a következőknek:

• csomópont.js 12-es verzió EZ, vagy magasabb Git a számítógépen
• egy Android eszközt Lollipop (Android, 5), vagy magasabb
• az Expo kliens alkalmazás telepítve a Android készülék (letöltés az Expo kliens az Android, a Play Store)
• egy alapvető megértése ReactJS vagy JavaScript

Is, vegye figyelembe, hogy a fejlesztési számítógép, majd a telefon kell csatlakoztatni ugyanarra a vezeték nélküli hálózatra.

letöltési csomópont.js

keresse fel a csomópontot.js honlapján, majd töltse le a legújabb verzióját Node. A Node Windows, macOS és Linux operációs rendszerekhez is elérhető. Egyszerűen válassza ki az operációs rendszert, majd telepítse a webhelyen elérhető utasítások szerint.

annak ellenőrzésére, hogy csomópont.js telepítve van, nyisson meg egy terminál ablakot és írja be:

node -v

Ez a parancs megjeleníti a telepített csomópont verziót.

telepítse Expo Client

miután telepítette a csomópontot, telepítenie kell az Expo CLI klienst is. Egyszerűen futtassa a következő parancsot:

 npm install expo-cli --global

macOS és Linux felhasználók számára, győződjön meg róla, hogy asudo.

sudo npm install expo-cli --global

figyelmen kívül hagyja az Expo CLI telepítésének folyamatában előforduló figyelmeztetéseket vagy hibákat. A sikeres telepítés után az alábbi üzenetet kell látnia.

hozzon létre egy Teendőlista alkalmazást a React Native

segítségével létrehozunk egy egyszerű teendőlista alkalmazást, amely lehetővé teszi, hogy beírja az elvégzendő feladatok listáját, és megjeleníti azokat a képernyőn.

új projekt létrehozása Expo

az induláshoz futtassa a következő Expo CLI parancsot egy új projekt létrehozásához:

expo init tasklist

tasklist a projekt neve. A rendszer kérni fogja, hogy válasszon egy sablont a projekthez. Most válassza ki az üres sablont, amely minimális függőségeket biztosít.

a expo init parancs létrehoz egy projektmappát, és telepíti a React natív alkalmazás által megkövetelt összes függőséget.

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

keresse meg a projekt mappát, majd futtassa a következő parancsot:

cd tasklist-appnpm start

dev eszközök és nyisson meg egy új lapot a böngészőben, amely így néz ki:

Ez az ablak lehetővé teszi az alkalmazás futtatását szimulátoron vagy csatlakoztatott eszközön.

csatlakoztasson egy eszközt

most nyissa meg az Expo client alkalmazást a fizikai Android-eszközön, majd válassza a QR-kód beolvasása lehetőséget, az alábbiak szerint.

ezután térjen vissza az Expo dev ablakhoz, szkennelje be a vonalkódot, és várja meg, amíg a JavaScript köteg építési folyamata befejeződik. Ez általában néhány percet vesz igénybe. Amikor a folyamat befejeződött, az alkalmazásnak a telefonon kell futnia!

Projektstruktúra

most, hogy a fejlesztői környezet készen áll, szerkesztheti a projekt kódját a kívánt kódszerkesztővel. A projekt mappa így néz ki:

• eszközök: az alkalmazás képeit tárolja
• node_modules: tartalmazza a projekt összes függőségét
• alkalmazás.js: tartja a kódot, amely lehetővé teszi a UI, és egy lényeges fájl

App.a JS nyitva van a fenti képernyőképen. Vessünk egy közelebbi pillantást. Először importálunk Reactreact. Ezután importáljuk a Textés Viewkomponenseket a react-native – ból. Importáljuk a Stylesheet – t is, amely segít a stílus kialakításában.

a React Native beépített komponensekkel érkezik, mint például a <Text> és a <View>, szemben a szabványos HTML komponensekkel, mint például a és <p>. A<View> komponens a React Native legalapvetőbb összetevője, és más gyerekkomponensek csoportosítására használják—mint például a<div> HTML-ben. A<Text> komponens a szöveges tartalom megjelenítésére szolgál a képernyőn—mint például a<p> HTML-ben.

Az alkalmazás boilerplate verziójában.js, hogy az Expo létrehoz, van egy egyszerű nézet egy szöveges komponens, állapotsor. Ezt a nézetet a App() függvény adja vissza. Astyles konstans Tartalmaz néhány alapvető CSS-t a nézet stílusához.

Ezután adjunk hozzá néhány új összetevőt és stílust az alkalmazáshoz!

hozza létre az alkalmazás felhasználói felületét

nyissa meg az alkalmazást.js fájl, majd adja meg a következő kódot.

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

a fenti kód egyszerű szövegbevitelt és egy gombot ad hozzá új feladatok hozzáadásához. A CSS flexbox styling segítségével az összetevőket egymás mellé helyezzük.

eseménykezelés hozzáadása

a felhasználói bemenet eléréséhez először importáljuk a useState() függvényt a react – ból, majd a newTask() és funkciók. Mivel a felhasználó még nem írt be semmit, a kezdeti állapot üres lesz. Adja hozzá a következő kódot a App() függvény tetejére, közvetlenül a returnfelett:

const = useState('');

ezután meghatározzuk a taskInputHandler tartalmat, amely figyeli a bemenet változását és frissíti a tartalmat a setNewTask() függvényből. Adja hozzá ezeket a sorokat a App() függvényhez következő:

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

most regisztráljuk ezt a bemeneti kezelőt aTextInput összetevővel. Frissítse TextInput összetevőjét, így a következőnek tűnik.

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

most meg kell kezelnünk a gombnyomásokat. Amikor a felhasználó megnyomja a + gombot, hozzá akarjuk adni az új feladatot egy listához.

először meghatározzuk állapotunkat a feladatok listájához:

 const = useState();

ezután meghatározunk egy addTaskHandler függvényt az új feladat hozzáadásához (megtalálható a newTask állapotban).

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

és regisztrálja az eseménykezelőt a <Button> összetevővel:

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

végül hozzáadunk egy új nézetet a létrehozott listában szereplő összes feladat megjelenítéséhez. Ez közvetlenül a bemeneti konténer nézet után történik,de még mindig a fő tartály nézetben.

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

teljes forráskód az alkalmazáshoz.js

Az alkalmazás teljes kódja.js alább látható. Hasonlítsd össze azzal, amid van.

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

következtetés

ebben az oktatóanyagban megtanulta, hogyan hozhat létre egy React natív alkalmazást az Expo segítségével.

a React Native nagyszerű keretrendszer és népszerű platform mind a fejlesztők, mind a vállalkozások számára. A React Native programmal létrehozott alkalmazások garantáltan zökkenőmentesen működnek bármely platformon vagy rendszeren. A React Native a fejlesztési munkát is megmenti azáltal, hogy egyszer kódolja az alkalmazást, majd bármilyen mobil platformon futtatja.

prémium mobilalkalmazás sablonok a CodeCanyon-tól

a CodeCanyon egy online piactér, amely több száz mobilalkalmazás sablonnal rendelkezik—Android, iOS, React Native és Ionic számára. Az egyik használatával napokat, akár hónapokat is megtakaríthat.

akár csak most kezdted el a React Native alkalmazást, akár egy tapasztalt fejlesztő vagy, a React Native alkalmazássablon egy nagyszerű módja annak, hogy időt és erőfeszítést takaríts meg a következő alkalmazásprojekteden.

Ha nehezen tudja eldönteni, hogy melyik sablon a CodeCanyon megfelelő az Ön számára, ezeknek a cikkeknek segíteniük kell:

• 
  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