Különbségek

A kiválasztott változat és az aktuális verzió közötti különbségek a következők.

--- oktatas:telefon:react_native:adat_http_szerverrol [2022/01/01 12:22] – [Adat HTTP szerverről] admin
+++ oktatas:telefon:react_native:adat_http_szerverrol [2023/04/24 08:49] (aktuális) – [Másik példa] admin
@@ Sor 194: / Sor 194: @@
     .catch((error) => alert(error))
     .finally(()=>setLoading(false));
-  });
+  }, []);
   return (
@@ Sor 260: / Sor 260: @@
   console.log('Hiba')
 })
+</code>
+===== ActivityIndicator-ral =====
+<code javascript App.js>
+import React, { useState, useEffect } from 'react';
+import { StyleSheet, Text, View, FlatList, ActivityIndicator } from 'react-native';
+const dataURL = "https://gist.githubusercontent.com/andteki/91c74e1ae7f292ec02f100e09fe52c7f/raw/487f4dd6e0e9da0bab6e8920b1c3b9f2c6b70e8f/test.json"
+export default function App() {
+  const [isLoading, setLoading] = useState(true);
+  const [data, setData] = useState([]);
+  const [title, setTitle] = useState([]);
+  const [desc, setDesc] = useState([]);
+  useEffect(() => {
+    fetch(dataURL)
+    .then((response) => response.json())
+    .then((json) => {
+      setData(json.friends);
+      setTitle(json.title);
+      setDesc(json.desc);
+    })
+    .catch((error) => alert(error))
+    .finally(setLoading(false));
+  });
+  return (
+    <View style={styles.container}>
+      {isLoading ? (
+        <ActivityIndicator />
+      ) : (
+        <View>
+          <Text style={styles.title}>{title}</Text>
+          <FlatList
+            data = {data}
+            keyExtractor={({ id }, index) => id}
+            renderItem={({item}) => (
+              <Text style={styles.friend} >
+                {item.name} - {item.age}
+              </Text>
+            )}
+          />
+          <Text style={styles.desc}>{desc}</Text>
+        </View>
+      )}
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginTop: 25,
+  },
+  friend: {
+    fontSize: 22,
+  },
+  title: {
+    fontSize: 30,
+    fontWeight: "bold",
+  },
+  desc: {
+    textAlign: "center",
+    marginBottom: 100,
+    color: "#333",
+  }
+});
 </code>