Diferències

Ací es mostren les diferències entre la revisió seleccionada i la versió actual de la pàgina.

Enllaç a la visualització de la comparació

--- react_native [2026/03/05 09:15]
enric_mieza_sanchez [Primer codi exemple]
+++ react_native [2026/03/06 17:34] (actual)
enric_mieza_sanchez [React Native]
@@ Línia 3: / Línia 3: @@
 [[React]] és un framework per a JavaScript molt popular desenvolupat per Facebook/Meta.
+[[https://reactnative.dev/|React Native]] son unes llibreries per poder desenvolupar aplicacions multiplataforma. A diferència de [[Cordova]] que executa el codi Javascript a l'arxiu executable final, React Native traudeix als diferents llenguatges nadius de les plataformes objectiu, en particular Android i iOS.
+En React Native no podrem crear tags HTML genèrics com H1 o DIV, ja que aquests no tenen un equivalent als dispositius mòbils (sí que funcionarien en web, però llavors no seria multiplataforma). En el seu lloc, cal emprar els Native Components com View, Text, Image, ScrollView i TextInput.
+  * Web oficial: https://reactnative.dev/
   * [[https://reactnative.dev/docs/intro-react-native-components|Components nadius per a React Native]]: View, Text, Image, ScrollView i TextInput.
+{{tag>#Dam #Daw #DamMp08 Android iOS Apple Javascript JS }}
-Hi ha 2 maneres de treballar:
+===== Eines bàsiques =====
+Per poder treballar amb React Native caldrà disposar de:
+  * NodeJS versió LTS
+  * Android Studio (o com a mínim disposar de les SDKs al PC).
+  * XCode si volem treballar en iOS.
+Hi ha 2 eines maneres de treballar i que tenen eines diferents:
   * Expo: és una plataforma que compila i realitza moltes operacions per tu sobre la seva infraestructura, com compilar.
   * React Native CLI: totes les eines estan en local. Ens permet mes personalització i menys dependència de tercers.
-Treballarem amb React Native CLI ja que l'altra opció disminueix la nostra sobirania digital i ens permet disposar de tots els recuros reals a la nostra màquina local.
+Treballarem aquí amb React Native CLI ja que millora la nostra sobirania digital i ens permet disposar de tots els recursos reals a la nostra màquina local.
+\\
+===== Creació del projecte =====
 Crear un projecte React Native CLI (ens demanarà el nom del projecte):
@@ Línia 19: / Línia 36: @@
   * si instal·lem CocoaPods (per a iOS és necessari)
-Entrem al projecte i llancem l'app per a la plataforma que ens interessi:
+Entrem al projecte.
+En Linux ens caldrà obrir un altre terminal per engegar Metro:
+  $ npx react-native-start
+Llancem l'app per a la plataforma que ens interessi:
   $ npm run ios
   $ npm run android
+  $ npx react-native run-android
+  $ npx react-native run-ios
 Inicialment la plataforma web no està disponible.
 \\
 ===== Primer codi exemple =====
+Elimineu el codi d'exemple App.js que ve a la plantilla per defecte i utilitzeu aquest App.jsx
+SafeAreaProvider i SafeAreaView impedeixen que el contingut vagi a la barra d'estat del dispositiu. Per disposar d'aquests elements cal instal·lar:
+  $ npm install react-native-safe-area-context
+Utilitzem només els elements permesos per React Native, i fem un bucle per omplir la pantalla i comprovar el ScrollView.
 <file javascript App.jsx>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina