React Native on Facebook-yhtiön luoma avoimen lähdekoodin mobiilisovelluskehys. Sen avulla voit kehittää sovelluksia Android-ja iOS-laitteille yhdellä koodinpätkällä. React Native powers jotkut maailman suosituimmista sovelluksista, kuten Instagram ja Facebook, ja tässä viestissä näytän, miten luoda ensimmäinen React Native sovellus Androidille.

esimerkki React Native-koodista

tyypillisen mobiilisovelluksen näytön React Native-koodi näyttää tältä:

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

jos katsoo tarkkaan, huomaa, että React Native käyttää JavaScriptin, HTML-tyyppisen merkinnän ja css: n yhdistelmää. Tämä koodinpätkä määrittää näytön, jossa on Tekstinäyttö ja muotoilu.

React Native Development Environments: Expo vs. React Native CLI

on kaksi tapaa luoda React Native-sovellus:

1. Expo CLI
2. React Native CLI

puhun jokaisen alla olevan hyvistä ja huonoista puolista.

Expo CLI

Expo on avoimen lähdekoodin kehys ja alusta universal React-sovelluksille, joka antaa hallitun sovelluskehityksen työnkulun. Se on joukko työkaluja ja palveluita, jotka on rakennettu React Native-ja native-alustojen ympärille, jotka auttavat kehittämään, rakentamaan, ottamaan käyttöön ja nopeasti toistamaan iOS -, Android-ja web-sovelluksia samasta JavaScript-tai TypeScript-koodista.

Expo vie pois kaikki React-natiivisovellusten rakentamiseen liittyvät monimutkaisuudet. Joitakin Expo CLI: n ominaisuuksia ovat:

• Yleiset sovellusliittymät, jotka tarjoavat pääsyn ominaisuuksiin, kuten kameraan, karttoihin, ilmoituksiin, antureihin, haptiikkaan ja paljon muuhun.
• pilvipohjainen rakentamispalvelu, joka antaa sovelluskauppaan valmiita binäärejä ja käsittelee varmenteita.
• over-the-air päivitykset, joiden avulla voit päivittää sovelluksen milloin tahansa ilman vaivaa ja viiveitä lähettämisestä kauppaan.

React Native CLI

React Native CLI on perus-ja paljasmetallikehitysympäristö. Hyvä puoli on se, että se mahdollistaa sovelluskinarioiden rakentamisen omalle koneelle ilman pilvipalveluun turvautumista. Toisaalta, asennus on paljon monimutkaisempi-rakentaa sovelluksia Android, sinun täytyy asentaa Android Studio ja määrittää monia ominaisuuksia ennen aloittamista. Tämä prosessi voi olla hieman monimutkainen, mutta React Native CLI-ympäristö sopii paremmin ammattimaisille sovelluskehittäjille.

tässä opetusohjelmassa käytämme Expoa, koska se on helpoin tapa aloittaa React Native-sovellusten rakentaminen.

miten Expo toimii

käyttääksesi Expoa sinun on ensin asennettava Expo-asiakassovellus, joka on saatavilla Play Storesta (versio on saatavilla myös iOS App Storesta). Expo Client-sovelluksen avulla voit suorittaa sovelluksen testaustarkoituksiin reaaliajassa.

voit koodata React Native-sovelluksesi omalla tietokoneellasi suosikkiohjelmatekstieditorillasi ja käyttää sitten Expo CLI: tä sovelluksen testaamiseen tai julkaisemiseen. Kulissien takana Expo paketoi React Native-koodisi ja tuo sen laitteesi Expo Client-sovellukseen. Voit myös käyttää Expo CLI: tä julkaisemaan sovelluksesi ja asettamaan sen kenen tahansa saataville Expo-asiakkaan kanssa, tai rakentamaan erillisen version sovelluksestasi, joka voidaan ladata app Storeen ja suorittaa asentamatta Expo-asiakasohjelmaa.

sovelluksen luominen Expolla

tässä opetusohjelmassa käytämme Expo CLI: tä appimme luomiseen.

edellytykset

luodaksesi React Native-sovelluksen Expolla, sinun on täytettävä seuraavat vaatimukset:

• solmu.js-versio 12 LTS tai uudempi ja GIT tietokoneellesi
• Android-laite, jossa on Lollipop (Android 5) tai uudempi
• Expo-asiakassovellus, joka on asennettu Android-laitteellesi (lataa Expo-asiakasohjelma Androidille Play-Kaupasta)
• perusymmärrys ReactJS: stä tai JavaScriptistä

huomaa myös, että kehitystietokone ja-puhelin on liitettävä samaan langattomaan verkkoon.

Lataussolmu.js

käy solmussa.js verkkosivuilla ja lataa uusin versio solmu. Node on saatavilla Windows -, macOS-ja Linux-käyttöjärjestelmille. Valitse käyttöjärjestelmä ja asenna se sivuston ohjeiden mukaan.

if-solmun tarkistaminen.JS on asennettu, avaa pääteikkuna ja kirjoita:

node -v

Tämä komento näyttää asennetun Solmuversion.

Install Expo Client

Kun olet asentanut solmun, sinun on myös asennettava Expo CLI-asiakasohjelma. Yksinkertaisesti suorita seuraava komento:

 npm install expo-cli --global

macOS-ja Linux-käyttäjille, varmista että käytät sudo.

sudo npm install expo-cli --global

älä välitä varoituksista tai virheistä, joita Expo CLI: n asennuksessa tapahtuu. Onnistuneen asennuksen jälkeen, sinun pitäisi nähdä Viestin alla.

luo Tehtävälistasovellus React Native

luomme yksinkertaisen tehtävälistasovelluksen, jonka avulla voit syöttää listan tehtävistä, jotka sinun on tehtävä ja näyttää ne ruudulla.

Luo uusi projekti Expo

aloittaaksesi suorita seuraava Expo CLI-komento luodaksesi uuden projektin:

expo init tasklist

tasklist on projektin nimi. Sinua pyydetään valitsemaan projektisi malli. Nyt, Valitse tyhjä malli, joka antaa sinulle minimaalinen riippuvuudet.

expo init komento luo projektikansion ja asentaa kaikki react-natiivisovelluksen vaatimat riippuvuudet.

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

Siirry projektikansioon ja suorita seuraava komento:

cd tasklist-appnpm start

npm start aloittaa Expo dev työkalut ja Avaa selaimessa uusi välilehti, joka näyttää tältä:

tämä ikkuna mahdollistaa sovelluksen ajamisen simulaattorilla tai liitettävällä laitteella.

Liitä laite

nyt, avaa Expo client-sovellus fyysisellä Android-laitteellasi ja valitse Scan QR Code-vaihtoehto, kuten alla on esitetty.

seuraavaksi palaa Expo dev-ikkunaan, skannaa viivakoodi ja odota JavaScript-paketin rakentamisprosessin valmistumista. Tämä kestää yleensä pari minuuttia. Kun prosessi on valmis, sovelluksen pitäisi olla käynnissä puhelimessasi!

projektirakenne

nyt kun kehitysympäristösi on valmis, voit muokata projektin koodia haluamallasi koodieditorilla. Projektikansio näyttää jotakuinkin tältä:

• assets: holds the images for the app
• node_modules: sisältää kaikki projektiin liittyvät riippuvuudet
• App.js: sisältää koodin, joka antaa käyttöliittymän ja on oleellinen tiedosto

sovellus.js on auki yllä olevassa kuvakaappauksessa. Katsotaanpa tarkemmin. Ensin tuodaan React from react. Tämän jälkeen tuodaan Text ja View komponentit react-native. Tuomme myös Stylesheet, mikä auttaa stailauksessa.

React Native tulee sisäänrakennetuilla komponenteilla, kuten <Text> ja <View> erotuksena tavallisista HTML-komponenteista, kuten <div> ja <p><View> komponentti on React natiivin perustavin komponentti ja sitä käytetään muiden lasten komponenttien ryhmittelyyn—kuten <div> HTML: ssä. <Text>—komponenttia käytetään tekstisisällön näyttämiseen näytöllä-kuten <p> HTML: ssä.

sovelluksen boilerplate-versiossa.JS että Expo luo, on yksinkertainen näkymä tekstikomponentti ja tilarivi. Tämä näkymä palautetaan funktiolta App()styles vakio sisältää joitain perus-CSS: ää näkymän tyylittämiseksi.

seuraavaksi lisätään sovellukseen uusia komponentteja ja tyylejä!

Luo sovelluksen käyttöliittymä

Avaa sovellus.JS tiedosto ja kirjoita seuraava koodi.

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

yllä olevaan koodiin lisätään yksinkertainen tekstinsyöttö ja painike uusien tehtävien lisäämiseen. Käytämme CSS flexbox muotoilu sijoittaa komponentit vierekkäin.

lisää tapahtumien käsittely

käyttäjän syötteen saamiseksi tuomme ensin useState() funktion react ja päivitämme sen avulla newTask() ja setnewTask() funktiot. Koska käyttäjä ei ole kirjoittanut vielä mitään, alkutila on tyhjä. Lisätään seuraava koodi App() funktion yläosaan, juuri return:

const = useState('');

määrittelemme sitten taskInputHandler, joka kuuntelee syötön muutoksen ja päivittää sisällön setNewTask() funktio. Lisää nämä rivit App() funktio seuraava:

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

nyt rekisteröimme tämän tulonkäsittelijän TextInput komponentti. Päivitä TextInput komponentti niin se näyttää seuraavalta.

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

nyt pitää hoitaa nappien painallukset. Kun käyttäjä painaa + – painiketta, haluamme lisätä uuden tehtävän luetteloon.

määrittelemme ensin oman tilamme tehtäväluettelolle:

 const = useState();

seuraavaksi määrittelemme addTaskHandler funktion, jolla lisätään uusi tehtävä (löytyy newTask tila) luetteloon.

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

ja rekisteröi kyseinen tapahtumankäsittelijä <Button> komponentti:

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

lopuksi lisäämme uuden näkymän, joka näyttää kaikki luomamme listan tehtävät. Tämä menee heti tulosäiliönäkymän jälkeen, mutta silti pääsäiliönäkymän sisällä.

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

täydellinen lähdekoodi sovellukselle.JS

sovelluksen koko koodi.js näkyy alla. Vertaa sitä siihen, mitä sinulla on.

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

johtopäätös

tässä opetusohjelmassa opit luomaan React Native-sovelluksen Expon kanssa.

React Native on loistava kehys ja suosittu alusta sekä kehittäjille että yrityksille. React Native-sovelluksella luodut sovellukset toimivat takuuvarmasti millä tahansa alustalla tai järjestelmällä. React Native säästää myös kehitystyötä antamalla sinun koodata sovelluksesi kerran ja ajaa sitä millä tahansa mobiilialustalla.

Premium Mobile App Templates From CodeCanyon

CodeCanyon on online—markkinapaikka, jossa on satoja mobiilisovelluspohjia-Androidille, iOS: lle, React Native: lle ja Ionicille. Voit säästää päiviä, jopa kuukausia, vaivaa käyttämällä yhtä niistä.

olitpa vasta aloittelemassa React Native-sovelluksen käyttöä tai kokenut kehittäjä, React Native-sovellusmalli on loistava tapa säästää aikaa ja vaivaa seuraavassa sovellusprojektissasi.

Jos sinulla on vaikeuksia päättää, mikä codecanyonin malli sopii sinulle, näiden artikkelien pitäisi auttaa:

• 
  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