أحمد عبد الله2 نشر 19 مارس 2021 أرسل تقرير مشاركة نشر 19 مارس 2021 السلام عليكم انا استخدم هذا الكود لاطبق هذه النتيجة .. لكنى اشعر بانه اطول مما يجب كيف أقوم باختصار هذا الكود مع انه 89 سطر لكنى متاكد من انه يمكنن تقليله .. بالتاكيد هناك طريقة لاختصاره >> React Native import React, { useState, useEffect } from "react"; import { FlatList, StyleSheet, View, Text } from "react-native"; import axios from "axios"; function App() { const [data, setData] = useState([]); useEffect(() => { getPhotos(); }, []); function getPhotos() { axios .get("https://jsonplaceholder.typicode.com/photos") .then(async function (response) { setData(response.data); }) .catch((err) => console.error(err)); } const [user, setUser] = useState(1); const newData = data.filter((e) => e.albumId === user); console.log(newData); return ( <View style={styles.con}> <View> {/* من أول هنا تبدأ المشكلة .. أريد ان انظف الكود */} <Text style={ user === 1 ? { backgroundColor: "red" } : { backgroundColor: "aqua" } } onPress={() => setUser(1)} > user one </Text> <Text style={ user === 2 ? { backgroundColor: "red" } : { backgroundColor: "aqua" } } onPress={() => setUser(2)} > user Two </Text> <Text style={ user === 3 ? { backgroundColor: "red" } : { backgroundColor: "aqua" } } onPress={() => setUser(3)} > user 3 </Text> <Text style={ user === 4 ? { backgroundColor: "red" } : { backgroundColor: "aqua" } } onPress={() => setUser(4)} > user 4 </Text> </View> <FlatList data={newData} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => ( <View> <Text>{item.albumId}</Text> <Text>{item.title}</Text> </View> )} /> </View> ); } const styles = StyleSheet.create({ con: {}, }); export default App; 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
1 Mohammed Saber6 نشر 19 مارس 2021 أرسل تقرير مشاركة نشر 19 مارس 2021 وعليكم السلام ورحمة الله وبركاته مرحباً أحمد: من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ import React, { useState, useEffect } from "react"; import { FlatList, StyleSheet, View, Text } from "react-native"; import axios from "axios"; function App() { const [data, setData] = useState([]); useEffect(() => { getPhotos(); }, []); function getPhotos() { axios .get("https://jsonplaceholder.typicode.com/photos") .then(async function (response) { setData(response.data); }) .catch((err) => console.error(err)); } const [user, setUser] = useState(1); const newData = data.filter((e) => e.albumId === user); // فقط نقوم بإرجاع اللون بناءً علي الشرط const getBackgroundColor = (number) => { return user === number ? "red" : 'aqua'; } // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة const specialUsers = [ {id: 1, name: 'user one'}, {id: 2, name: 'user Two'}, {id: 3, name: 'user Three'}, {id: 4, name: 'user Four'}, ]; return ( <View style={styles.con}> // هنا نقوم بعمل دوران علي المستخدمين {specialUsers.map(user => ( <Text key={user.name} // هذا جزء تحسين التنسيقات style={{ backgroundColor : getBackgroundColor(user.id) }} onPress={() => setUser(user.id)} > {user.name} </Text> ))} <FlatList data={newData} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => ( <View> <Text>{item.albumId}</Text> <Text>{item.title}</Text> </View> )} /> </View> ); } const styles = StyleSheet.create({ con: {}, }); export default App; 1 اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
0 أحمد عبد الله2 نشر 19 مارس 2021 الكاتب أرسل تقرير مشاركة نشر 19 مارس 2021 بتاريخ 2 ساعات قال Mohammed Saber: وعليكم السلام ورحمة الله وبركاته مرحباً أحمد: من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل array وتقوم بعمل loop عليهم ثم تعرضهم. أيضاً الجزء الخاص بالألوان لا يجب أن تفعله هكذا فماذا لو لديك ٤ خصائص تريد تغييرهم هل ستعمل ٤ اوبجيكت ؟ import React, { useState, useEffect } from "react"; import { FlatList, StyleSheet, View, Text } from "react-native"; import axios from "axios"; function App() { const [data, setData] = useState([]); useEffect(() => { getPhotos(); }, []); function getPhotos() { axios .get("https://jsonplaceholder.typicode.com/photos") .then(async function (response) { setData(response.data); }) .catch((err) => console.error(err)); } const [user, setUser] = useState(1); const newData = data.filter((e) => e.albumId === user); // فقط نقوم بإرجاع اللون بناءً علي الشرط const getBackgroundColor = (number) => { return user === number ? "red" : 'aqua'; } // نقوم بجمع المستخدمين الذين سيقومون بنفس الوظيفة const specialUsers = [ {id: 1, name: 'user one'}, {id: 2, name: 'user Two'}, {id: 3, name: 'user Three'}, {id: 4, name: 'user Four'}, ]; return ( <View style={styles.con}> // هنا نقوم بعمل دوران علي المستخدمين {specialUsers.map(user => ( <Text key={user.name} // هذا جزء تحسين التنسيقات style={{ backgroundColor : getBackgroundColor(user.id) }} onPress={() => setUser(user.id)} > {user.name} </Text> ))} <FlatList data={newData} keyExtractor={(item) => item.id.toString()} renderItem={({ item }) => ( <View> <Text>{item.albumId}</Text> <Text>{item.title}</Text> </View> )} /> </View> ); } const styles = StyleSheet.create({ con: {}, }); export default App; شكرا جزيلا أخى .. الكود صار اجمل بكثير اقتباس رابط هذا التعليق شارك على الشبكات الإجتماعية More sharing options...
السؤال
أحمد عبد الله2
السلام عليكم
انا استخدم هذا الكود لاطبق هذه النتيجة ..
لكنى اشعر بانه اطول مما يجب
كيف أقوم باختصار هذا الكود مع انه 89 سطر لكنى متاكد من انه يمكنن تقليله .. بالتاكيد هناك طريقة لاختصاره >> React Native
رابط هذا التعليق
شارك على الشبكات الإجتماعية
2 أجوبة على هذا السؤال
Recommended Posts
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.