Diferències

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

--- react_native [2026/03/05 09:11]
enric_mieza_sanchez
+++ react_native [2026/03/05 09:17] (actual)
enric_mieza_sanchez [Primer codi exemple]
@@ Línia 25: / Línia 25: @@
 Inicialment la plataforma web no està disponible.
+\\
 ===== 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.
+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 { StatusBar, ScrollView, StyleSheet, useColorScheme, Text, View } from 'react-native';
@@ Línia 39: / Línia 47: @@
 	const arrayIndices = Array.from({ length: 100 }, (_, i) => i);
-	return <SafeAreaView>
+	return <SafeAreaProvider>
+		<SafeAreaView>
 			<StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
 			<ScrollView>
 				<View style={styles.container}>
 					<Text>Hello World React Native</Text>
-					{arrayIndices.map( (elem) => <Text>Hola {elem}</Text> )}
+					{arrayIndices.map( (elem) => <Text key={elem}>Hola {elem}</Text> )}
 				</View>
 			</ScrollView>
-		</SafeAreaView>;
+		</SafeAreaView>
+		</SafeAreaProvider>;
 }

bytes.cat