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:04]
enric_mieza_sanchez creat
+++ 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 =====
+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';
+import { SafeAreaProvider, SafeAreaView, useSafeAreaInsets, } from 'react-native-safe-area-context';
+export default function App() {
+	const isDarkMode = false;
+	const arrayIndices = Array.from({ length: 100 }, (_, i) => i);
+	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 key={elem}>Hola {elem}</Text> )}
+				</View>
+			</ScrollView>
+		</SafeAreaView>
+		</SafeAreaProvider>;
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: 'center',
+  },
+});
+</file>

bytes.cat

Eines de l'usuari

Eines del lloc

Diferències

Eines de la pàgina