React Native je open-source mobilní aplikační rámec vytvořený Facebook. Můžete jej použít k vývoji aplikací pro zařízení Android a iOS s jedinou kódovou základnou. Reagovat Native powers některé z nejpopulárnějších aplikací na světě, jako je Instagram a Facebook, a v tomto příspěvku vám ukážu, jak vytvořit první React Native aplikaci pro Android.

příklad nativního kódu React

nativní kód React pro typickou obrazovku mobilní aplikace vypadá takto:

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

Pokud se podíváte pozorně, uvidíte, že Reagovat Native používá kombinaci Javascriptu, HTML jako značkovací a CSS. Tento úryvek kódu definuje obrazovku s textovým zobrazením a stylingem.

Reagovat Nativní Vývojové Prostředí: Expo vs. Reagovat Native CLI

Existují dva způsoby, jak vytvořit Reagovat Native aplikace:

1. Expo CLI
2. Reagovat Native CLI

budu mluvit o výhodách a nevýhodách každého níže.

Expo CLI

Expo je open-source framework a platformu pro univerzální Reagovat aplikace, která dává podařilo vývoj aplikací workflow. Jedná se o soubor nástrojů a služeb, postavený kolem Reagovat Native a nativní platformy, které pomáhají rozvíjet, stavět, nasazení, a rychle přecházet na iOS, Android a web apps od stejného JavaScript nebo Stroji codebase.

Expo odstraní všechny složitosti spojené s budováním nativních aplikací React. Některé z funkcí Expo CLI zahrnují:

• Univerzální API, která poskytují přístup k funkcím, jako je kamera, mapy, oznámení, senzory, haptika a mnoho dalšího.
• cloud-based build služba, která vám dává app-store-ready binární soubory a zpracovává certifikáty.
• Over-the-air aktualizace, které vám umožní aktualizovat aplikaci kdykoliv bez potíží a zpoždění odeslání do obchodu.

React Native CLI

React Native CLI je základnější a bare-metal vývojové prostředí. Dobrá věc je, že umožňuje vytvářet binární soubory aplikací na vašem vlastním počítači, aniž byste se spoléhali na cloudovou službu. Na druhou stranu je nastavení mnohem komplikovanější – pro vytváření aplikací pro Android budete muset nainstalovat Android Studio a nakonfigurovat mnoho funkcí, než začnete. Tento proces může být trochu složitý, ale prostředí React Native CLI je vhodnější pro profesionální vývojáře aplikací.

pro tento tutoriál použijeme Expo, protože to je nejjednodušší způsob, jak začít vytvářet React Native apps.

Jak Expo Funguje

použití Expo, musíte nejprve nainstalovat Expo Klient aplikace, která je k dispozici na Play Store (verze je také k dispozici na iOS App Store). Aplikace Expo Client vám umožní spustit aplikaci pro účely testování v reálném čase.

můžete kódovat aplikaci React Native na svém počítači pomocí svého oblíbeného programovacího textového editoru a poté pomocí Expo CLI otestovat nebo publikovat aplikaci. V zákulisí Expo zabalí váš nativní kód React a zpřístupní jej aplikaci Expo Client ve vašem zařízení. Můžete také použít Expo CLI publikovat vaše aplikace a zpřístupnit ji každému, kdo se na Expo Klienta, nebo vytvořit samostatnou verzi aplikace, které lze nahrát na app store a spustit bez instalace Expo Klienta.

vytvoření aplikace s Expo

v tomto tutoriálu použijeme Expo CLI k vytvoření naší aplikace.

předpoklady

Chcete-li vytvořit nativní aplikaci React s Expo, musíte splnit následující:

• Node.js LTS verze 12 nebo vyšší a Git na vašem počítači
• Android zařízení s Lollipop (Android 5) nebo vyšší
• Expo klientské aplikace nainstalována na vašem zařízení se systémem Android (ke stažení na Expo klient pro Android z Play Store)
• základní znalost ReactJS nebo JavaScript

všimněte si Také, že váš vývojový počítač a telefon musí být připojen ke stejné bezdrátové síti.

stáhnout uzel.JS

navštivte uzel.webové stránky js a stáhněte si nejnovější verzi uzlu. Node je k dispozici pro operační systémy Windows, macOS a Linux. Jednoduše si vyberte svůj operační systém a nainstalujte jej podle pokynů dostupných na webu.

Chcete-li zkontrolovat, zda uzel.js je nainstalován, otevřete okno terminálu a zadejte:

node -v

Tento příkaz zobrazí nainstalovanou verzi uzlu.

nainstalujte klienta Expo

po instalaci uzlu budete také muset nainstalovat klienta Expo CLI. Jednoduše spusťte následující příkaz:

 npm install expo-cli --global

pro uživatele macOS a Linuxu se ujistěte, že používáte sudo.

sudo npm install expo-cli --global

ignorujte varování nebo chyby, které se vyskytnou při instalaci Expo CLI. Po úspěšné instalaci byste měli vidět níže uvedenou zprávu.

Vytvořit Seznam úkolů Aplikace S Reagovat Native

Jsme se vytvořit jednoduchý seznam úkolů aplikace, která vám umožní zadat seznam úkolů, které musíte udělat, a zobrazí je na obrazovce.

vytvořte nový projekt pomocí Expo

Chcete-li začít, Spusťte následující příkaz Expo CLI a vytvořte nový projekt:

expo init tasklist

tasklist je název projektu. Budete vyzváni k výběru šablony pro váš projekt. Prozatím vyberte prázdnou šablonu, která vám poskytne minimální závislosti.

příkazexpo init vytvoří složku projektu a nainstaluje všechny závislosti požadované nativní aplikací React.

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

přejděte do složky projektu a spusťte následující příkaz:

cd tasklist-appnpm start

npm start začne Expo dev tools a otevřete novou kartu ve vašem prohlížeči, který vypadá takto:

Toto okno umožňuje spustit své aplikace na simulátoru nebo připojeného zařízení.

Připojte zařízení

nyní otevřete aplikaci Expo client na vašem fyzickém zařízení Android a vyberte možnost skenovat QR kód, jak je uvedeno níže.

Next, jděte zpět na Expo dev okna, naskenovat čárový kód, a čekat na JavaScript balík build proces dokončit. To obvykle trvá několik minut. Po dokončení procesu by měla být aplikace spuštěna v telefonu!

Struktura projektu

Nyní, když je vaše vývojové prostředí připraveno, můžete upravit kód projektu pomocí preferovaného editoru kódu. Složka projektu vypadá takto:

• aktiv: drží obrazů pro aplikace
• node_modules: obsahuje všechny závislosti pro projekt
• Aplikace.js: obsahuje kód, který vykresluje uživatelské rozhraní a je základním souborem

App.js je otevřen na obrázku výše. Podívejme se blíže. Nejprve importujeme React z react. Poté importujeme komponenty Text a View z react-native. Importujeme také Stylesheet, což pomáhá se stylingem.

Reagovat Native přichází s vestavěnou-in komponenty, například <Text><View> jako protiklad k standardní HTML komponenty, jako <div><p>. Komponenta <View> je nejzákladnější komponentou v React Native a používá se pro seskupování dalších podřízených komponent-například <div> v HTML. Komponenta <Text> se používá k zobrazení textového obsahu na obrazovce-jako <p> v HTML.

ve verzi kotlové desky aplikace.js, který Expo vytvoří, je jednoduchý pohled s textovou komponentou a stavovým řádkem. Tento pohled je vrácen z funkce App(). Konstanta styles obsahuje některé základní CSS pro úpravu zobrazení.

Dále přidejte do aplikace Některé nové komponenty a styly!

vytvořte uživatelské rozhraní aplikace

Otevřete aplikaci.soubor js a zadejte následující kód.

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

výše uvedený kód přidává jednoduché zadávání textu a tlačítko pro přidávání nových úkolů. Používáme CSS flexbox styling k umístění komponent vedle sebe.

Přidat Událost Manipulace

Chcete-li získat vstup uživatele, musíme nejprve importovat useState() funkce react a použít jej k aktualizaci stavu newTask()setnewTask() funkce. Protože uživatel ještě nic nenapsal, počáteční stav bude prázdný. Přidejte následující kód do horní části App() funkce, těsně nad return:

const = useState('');

pak Jsme definovat taskInputHandler, který poslouchá na změny v zadávání a aktualizace obsahu setNewTask() funkce. Přidat tyto řádky do App() další funkce:

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

Nyní registrujeme tento vstup handler s TextInput složka. Aktualizujte komponentu TextInput, takže vypadá jako následující.

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

nyní musíme zvládnout stisknutí tlačítek. Když uživatel stiskne tlačítko+, chceme přidat novou úlohu do seznamu.

za Prvé, budeme definovat náš stát pro seznam úkolů:

 const = useState();

Next, definujeme jako addTaskHandler funkce přidat nový úkol (najdete v newTask stát) do seznamu.

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

a zaregistrujte tuto obslužnou rutinu události pomocí komponenty <Button> :

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

nakonec přidáme nové zobrazení pro zobrazení všech úkolů v seznamu, který jsme vytvořili. To jde hned po zobrazení vstupního kontejneru, ale stále uvnitř hlavního zobrazení kontejneru.

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

kompletní zdrojový kód pro aplikaci.js

úplný kód pro aplikaci.js je uveden níže. Porovnejte to s tím, co máte.

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

závěr

v tomto tutoriálu jste se naučili, jak vytvořit nativní aplikaci React s Expo.

React Native je skvělý rámec a populární platforma pro vývojáře i firmy. Aplikace vytvořené pomocí React Native zaručeně fungují hladce na jakékoli platformě nebo systému. React Native také šetří vývojové práce tím, že vám umožní kódovat aplikaci jednou a spustit ji na jakékoli mobilní platformě.

prémiové šablony mobilních aplikací od CodeCanyon

CodeCanyon je online tržiště, které má stovky šablon mobilních aplikací – pro Android, iOS, React Native a Ionic. Pomocí jednoho z nich můžete ušetřit dny, dokonce i měsíce úsilí.

ať už právě začínáte s React Native, nebo jste ostřílený vývojář, Šablona aplikace React Native je skvělý způsob, jak ušetřit čas a úsilí při dalším projektu aplikace.

Pokud máte potíže se rozhodování o tom, které šablony na CodeCanyon je pro vás to pravé, tyto články by měly pomoci:

• 
  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