bytes.cat

La wiki d'FP d'informàtica

Eines de l'usuari

Eines del lloc

Camí:
react_native

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ó

Ambdós costats versió prèvia Revisió prèvia
Següent revisió 		Revisió prèvia
react_native [2026/03/05 09:11]
enric_mieza_sanchez 		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. [[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.   * [[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.   * 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.   * 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): 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)   * 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 ios
   $ npm run android   $ npm run android
 +  $ npx react-native run-android
 +  $ npx react-native run-ios
  
 Inicialment la plataforma web no està disponible. Inicialment la plataforma web no està disponible.
  
 +\\
  
 ===== Primer codi exemple ===== ===== Primer codi exemple =====
  
-<file javascript App.jsx>+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>
 import { NewAppScreen } from '@react-native/new-app-screen'; import { NewAppScreen } from '@react-native/new-app-screen';
 import { StatusBar, ScrollView, StyleSheet, useColorScheme, Text, View } from 'react-native'; import { StatusBar, ScrollView, StyleSheet, useColorScheme, Text, View } from 'react-native';
Línia 39: Línia 70:
  const arrayIndices = Array.from({ length: 100 }, (_, i) => i);  const arrayIndices = Array.from({ length: 100 }, (_, i) => i);
  
- return <SafeAreaView>+ return <SafeAreaProvider> 
 + <SafeAreaView>
  <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />  <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
  <ScrollView>  <ScrollView>
  <View style={styles.container}>  <View style={styles.container}>
  <Text>Hello World React Native</Text>  <Text>Hello World React Native</Text>
- {arrayIndices.map( (elem) => <Text>Hola {elem}</Text> )}+ {arrayIndices.map( (elem) => <Text key={elem}>Hola {elem}</Text> )}
  </View>  </View>
  </ScrollView>  </ScrollView>
- </SafeAreaView>;+ </SafeAreaView> 
 + </SafeAreaProvider>;
 } }
  
react_native.1772701888.txt.gz · Darrera modificació: 2026/03/05 09:11 per enric_mieza_sanchez

Eines de la pàgina

Excepte on es digui una altra cosa, el contingut d'aquest wiki està subjecte a la llicència següent: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki