szit

Ez az oldal csak olvasható. Megtekintheted a forrását, de nem változtathatod meg. Ha úgy gondolod, hogy ez helytelen, kérdezd az Adminisztrátorokat!
[[oktatas:telefon:react_native|< React Native]]

====== React Native - Expo kezdés npx paranccsal ======

  * **Szerző:** Sallai András
  * Copyright (c) 2023, Sallai András
  * Szerkesztve: 2023, 2024
  * Licenc: [[https://creativecommons.org/licenses/by-sa/4.0/|CC Attribution-Share Alike 4.0 International]]
  * Web: https://szit.hu

===== Projekt létrehozása =====

  npx create-expo-app app01 --template



==== Webes felület függőségei ====

A telefonos szimuláció vagy valós telefon eszköz nélkül **webes felületen** szeretnénk
figyelemmel kísérni az alkalmazásunk felületét telepíteni kell a webes felület
függőségeit:

Lépjünk be a projekt könyvtárába, ha még nem tettük meg:
  cd app01

Telepítsük a webes függőségeket:
  npx expo install react-dom react-native-web @expo/metro-runtime

<note important>

A @expo/webpack-config elavult:

npx expo install react-dom react-native-web <del>@expo/webpack-config</del>

  * https://docs.expo.dev/workflow/web/ (2024)

</note>

<note tip>
Az automatikus frissítéshez az **App.js** fájl elejére 
vegyük fel a következő import sort:

<code javascript>
import "@expo/metro-runtime";
</code>

Indítsuk így a webes felültetet.

</note>

==== Projekt indítása ====

  npx expo start


Indítás közvetlenül webes felülettel:
  npx expo start --web


==== Projekt megtekintése telefonon ====

Szükség van telefonon az Expo Go alkalmazásra. 


Ha különböző hálózatban van a telefon és a számítógép:

  npx expo start --host tunnel
  npx expo start --tunnel


===== Update =====

<code>
A new version of `create-expo-app` is available
You can update by running: npm install -g create-expo-app
</code>
===== Snack =====

Gyakorláshoz használhatunk egy online felületet, amit Snack-nek hívnak:

<html>
<div data-snack-id="@sallaiandras/hellovilag" data-snack-platform="web" data-snack-preview="true" data-snack-theme="light" style="overflow:hidden;background:#F9F9F9;border:1px solid var(--color-border);border-radius:4px;height:505px;width:100%"></div>
<script async src="https://snack.expo.dev/embed.js"></script>
</html>


A Snack használható itt helyben is, de eredeti online helye a következő címen található:

  * https://snack.expo.dev/ (2023)

<note important>
A Snack nem tudja megjeleníteni a StatusBar elemet, így hibát is ír. Töröljük a StatusBar elemet, ha Snack-ben dolgozunk.
</note>

===== Sablon használata =====

A <nowiki>--template</nowiki> kapcsolóval sablonokat használhatunk.

  npx create-expo-app app01 --template

A <nowiki>--template</nowiki> kapcsoló egy interaktív választási lehetőséget jelenít meg számunkra.

<code>
npx create-expo-app app01 --template 
? Choose a template: › - Use arrow-keys. Return to submit.
❯   Blank
    a minimal app as clean as an empty canvas
    Blank (TypeScript)
    Navigation (TypeScript)
    Blank (Bare)
</code>

===== Link =====

  * https://docs.expo.dev/tutorial/create-your-first-app/ (2023)