Lekce 4 - První multiplatformní aplikace Nové
V minulé lekci, Promises a asynchronní funkce, jsme si popsali asynchronní funkce a promises a jejich využití.
V následujícím tutoriálu vývoje multiplatformních mobilních aplikací v React Native už konečně opustíme teoretické kruhy a napíšeme si naši první multiplatformní aplikaci. Projdeme si její spuštění na fyzickém zařízení i na simulátoru. Jak již bývá zvykem, první aplikace je většinou typu "Hello World!". Ani v tomto případě tomu nebude jinak, pouze s tím rozdílem, že nebudeme psát oslovení přímo do kódu. Napíšeme ho do textového pole přímo v aplikaci, která jej uloží do proměnné. Tu následně vypíšeme v dialogovém okně.
Založení projektu
Pro naši první opravdovou aplikaci si založíme samostatný projekt.
Spustíme Visual Studio Code a vytvoříme nový terminál, ve kterém v naší
pracovní složce spustíme příkaz
npx create-expo-app HelloApp
.
Po skončení příkazu pro vytvoření projektu si otevřeme soubor
App.js
. Z předchozích lekcí již víme, že se jedná o
vstupní bod pro naši aplikaci. V souboru najdeme
následující kód:
import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text>Open up App.js to start working on your app!</Text> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: '#fff', alignItems: 'center', justifyContent: 'center', }, });
Již při prvním pohledu je jasné, jakým způsobem budeme zapisovat kód a
také kam. Budeme ho psát do těla komponenty View
. Platí zde
stejné pravidlo jako v Reactu a to, že return
může vracet
pouze jednu komponentu. Chceme-li používat více komponent,
musíme je vkládat do nějakého kontejneru, v našem případě právě do
komponenty View
.
...konec náhledu článku...
Pokračuj dál
Došel jsi až sem a to je super! Věříme, že ti první lekce ukázaly něco nového a užitečného.
Chceš v kurzu pokračovat? Přejdi do prémiové sekce.
Koupit tento kurz
Obsah článku spadá pod licenci Premium, koupí článku souhlasíš se smluvními podmínkami.
- Neomezený a trvalý přístup k jednotlivým lekcím.
- Kvalitní znalosti v oblasti IT.
- Dovednosti, které ti pomohou získat vysněnou a dobře placenou práci.
Popis článku
Požadovaný článek má následující obsah:
V tutoriálu si projdeme si spuštění aplikace na fyzickém zařízení a na simulátoru. Vytvoříme aplikaci, která nás pozdraví podle uživatelského vstupu.
Kredity získáš, když podpoříš naši síť. To můžeš udělat buď zasláním symbolické částky na podporu provozu nebo přidáním obsahu na síť.