Mohammed Saber6

الرجاء إرفاق ملف المشروع

العناصر نفسها ولكن في الليست الثانية تم إزالة العناصر المكررة من الليست الأولى عن طريق دالة dict.fromKeys

يجب عليك وضع كل ماهو خاص في ملف .env بجانب ال src وتكون لديك نسخة محلية منه وتتجاهل رفعها أثناء ال build ويكون لديك ملف مشابه مرفوع علي السيرفر بحيث تشير إليه عندما تريد استخدام المتغيرات الخاصة التي وضعتها
project | |____ src |____ .env وبداخل ملف ال env تستخدم متغيرات خاصة تبدأ ب REACT_APP ثم الإسم الذي تريده هكذا 
 
REACT_APP_TOKEN="111111111111" REACT_APP_SECRET="Any thing" طبعاً عند استخدامها في الكود البرمجي الخاص بك تستخدم الآتي: 
 
process.env.REACT_APP_TOKEN process.env.REACT_APP_SECRET وهذا مرجع لك للتعمق أكثر 

هذا النمط يؤذي ال performance لأن الدالة سيتم إنشاؤها في كل مرة مع كل render وبالتالي في حالتك سيتم إنشاء المكون IconButton - Checkbox - img دائماً مع كل render ولحل هذه المشكلة فقط قم بالإشارة إليها هكذا 
 
selectPerson = tile => { // قم بعمل ما تريد } handleDelete = tile => { // قم بعمل ما تريد } handleOpen = img => { // قم بعمل ما تريد } {this.state.people.map(tile => ( <span key={tile.img}> <Checkbox onCheck={this.selectPerson(tile)} /> <GridTile actionIcon={<IconButton onClick={this.handleDelete(tile)}><Delete color="red"/></IconButton>}> <img onClick={this.handleOpen(tile.img)} src={tile.img} /> </GridTile> </span> ))}  

مرحباً بك: 
لكي تفهم الفرق يجب استخدام مثال أوضح مثل 
 
<Route path="/school" component={School} /> <Route path="/school/rooms" component={Rooms} /> بدون exact: عندما تكتب في المتصفح url/school سيقوم الراوتر بالبحث في قائمة ال routes لديك وإرجاع أول قيمة يجدها وهي أول route في المثال السابق وهذا جيد . لكن المشكلة ستظهر عندما تريد الذهب ل url/school/rooms سيبدأ الراوتر بالبحث وأيضاً سيقوم بإعادة أول قيمة يجدها وهي أول route في المثال السابق ( وهذا خطأ المفترض أن يرجع ثاني route ) وهذا بسبب المطابقة الجزئية في react router أي أن school جزء من school/rooms باستخدام exact: سيتأكد الراوتر من أن الصفحة التي تم تحميلها هي الصفحة التي لها نفس الرابط كما في الأمثلة السابقة ولن يعتمد المطابقة الجزئية

مرحباً أحمد: 
لديك خطأ في تحميل مكتبة @react-native-community/masked-view حاول تثبيها منفردة كما يلي: 
 
npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context ثم 
npm install --force @react-native-community/masked-view  

وعليكم السلام ورحمة الله وبركاته
مرحباً أحمد:
من الممتاز أنك تبحث عن طريقة لكتابة كود جيد وإليك بعض التحسينات
إذا لاحظت ستجد أن الجزء الذي يغير النتائج مكرر أربع مرات متشابهين حتى في التنسيقات وطريقة جلب النتائج لما لا تجرب أن تجعلهم داخل 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;  

مرحباً أحمد:
الخطأ يحدث حينما تكلم ال api فقبل أن تحصل على النتيجة تكون ال data فارغة وأنت في نفس الوقت تحاول تحريك ال slider لقيمة معينة وهي index وقيمتها الإبتدائية 0 ولكن عندما يحاول البرنامج تنفيذ ال scroll للعنصر 0 أي العنصر الأول لل data فلن يجده لأن النتيجة لم ترجع بعد ولذلك يفشل البرنامج 
الحل : هو آن تقوم بالتحريك عندما تكون هناك data موجودة useEffect(() => { if(index >= 0 && data.length) { // الشرط هنا refContainer.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت } }, [index, data]); // تقوم بتنفيذ الدالة عند تغيير الداتا useEffect(() => { if(index >= 0 && data.length) { refBox.current.scrollToIndex({ animated: true, index }); // تغيير على حسب قيمة ستايت } }, [index, data]);  

مرحباً بك: 
تحتاج ال stateManagement فقط في حالة كانت ال state مشتركة في مكونات كثيرة ولكن هنا هي فقط state ما بين الثلاث مكونات كالآتي: 
 
function App() { state= { isFilterChanged: false }; // عند تغيير الفلاتر تقوم بتحديث ما تريد في ال state updateFilterState = () => { // تقوم بتحديث كمثال isFilterChanged this.setState({ isFilterChanged: true }); } render() { const { isFilterChanged } = this.state; // تمرير الخاصية للمكونات الأخرى return( <> <TopBar isFilterChanged={isFilterChanged} /> /* عند تغيير الفلاتر نقوم بتحديث ال state وتمريرها للمكونات الأخرى */ <Filters onChangeFilter={updateFilterState} /> </> ); } } وعندما تريد الإستفادة من التغيير الحاصل يجب أن تستقبل isFilterChanged بداخل المكونات الأخرى ومقارنة قيمتها الحالية بقيمتها السابقة فإذا كانت مختلفة تقوم بتنفيذ كود معين 
function TopBar() { componentDidUpdate(prevProps) { const { isFilterChanged } = this.props; // التحقق ما إذا كانت القيمة تغيرت أم لا if(prevProps.isFilterChanged !== isFilterChanged) { // نقوم بتنفيذ دالة هنا أو أي شيئ تريده لأن القيمة اتغيرت console.log('isFilterChanged', isFilterChanged) } } render() { return( <> <nav>Header</nav> </> ); } }  

مرحباً أحمد : 
هذا ما تبحث عنه 
 
import React, { useState } from "react"; import { FlatList, SafeAreaView, StatusBar, StyleSheet, Text, TouchableOpacity } from "react-native"; const DATA = [ { id: "bd7acbea-c1b1-46c2-aed5-3ad53abb28ba", title: "First Item", }, { id: "3ac68afc-c605-48d3-a4f8-fbd91aa97f63", title: "Second Item", }, { id: "58694a0f-3da1-471f-bd96-145571e29d72", title: "Third Item", }, ]; const Item = ({ item, onPress, style }) => ( <TouchableOpacity onPress={onPress} style={[styles.item, style]}> <Text style={styles.title}>{item.title}</Text> </TouchableOpacity> ); const App = () => { const [selectedId, setSelectedId] = useState(null); const renderItem = ({ item }) => { // إذا كانت القيمة المخزنة تساوي قيمة ال id الخاص بالعنصر الحالي // نقوم بتغيير البوردر const border = item.id === selectedId ? "1px dashed aqua" : "none"; return ( <Item item={item} // عند الضغط على العنصر نقوم بتخزين ال id الخاص به onPress={() => setSelectedId(item.id)} style={{ border }} /> ); }; return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} keyExtractor={(item) => item.id} extraData={selectedId} /> </SafeAreaView> ); }; const styles = StyleSheet.create({ container: { flex: 1, marginTop: StatusBar.currentHeight || 0, }, item: { padding: 20, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, }); export default App;  

مرحباً أحمد: 
يجب أن أقوم بالإطلاع على المشروع لإفادتك بشكل أدق ولكن سأقول لك الفكرة بشكل عام
في البداية لديك صفحة وبداخلها مكونين (.ال slider + العناصر المربعة ) function App() { return ( <View style={styles.con}> <Slider /> <Boxes /> </View> ); }  
المكونين يتشاركون في البيانات كما تفعل في المثال المطروح  const photos = [ { id: 1, title: "Photo 1" }, { id: 2, title: "Photo 2" }, { id: 3, title: "Photo 3" }, { id: 4, title: "Photo 4" }, { id: 5, title: "Photo 5" }, { id: 6, title: "Photo 6" }, ];  
الصفحة التي تجمعهم فيها state عبارة عن selectedImg وستبدأ من ال 1 ( على افتراض أن لديك صورة لها id=1 بالطبع يمكنك تغييرها ) + دالة لتغيير هذه القيمة في حالتين فقط ( عند الضغط على أي مربع أو التحريك في ال slider ) + قمنا بتمرير الدالة للمكونين كما ذكرت في النقطة السابقة أم عن تمرير selectedImg فهو ما ستحتاج لكي تجعل الصورتين متطابقتين في الأبناء   function App() { const [ selectedImg, setSelectedImg ] = useState(1); updateSelectedImg = imgId => { setSelectedImg(imgId); } return ( <View style={styles.con}> <Slider selectedImg={selectedImg} updateSelectedImg={updateSelectedImg} /> <Boxes selectedImg={selectedImg} updateSelectedImg={updateSelectedImg} /> </View> ); }  
بداخل كل مكون سواء Slider أو Box عند تغيير القيمة يجب أن تكلم الخاصية updateSelectedImg لكي تقوم بتحديث القيمة selectedImg ويقوم المكون الآخر باستخدامها فمثلاً عند الضغط علي المكون Box سيحدث الآتي: 
 
function Boxes(props) { const { selectedImg, updateSelectedImg } = props; const [ activeImgId, setActiveImgId ] = useState(1); useEffect(() => { // عندما يتغير الid // سواء من هذا المكون أو من غيره نقوم بتحديث ال state // ونقوم باستخدامها في ال render if(selectedImg !== activeImgId) { setActiveImgId(selectedImg); } }, [selectedImg]); hangleBoxClick = item => { // تحديث الأب ليستفاد المكون الآخر بالتحديث updateSelectedImg(item.id); } return( // Loop through boxes [ FlatList ] // يمكنك استخدام activeImgId // في عمل ما تريد <FlatList data={photos} keyExtractor={(item, index) => item.id.toString()} style={styles.flatList} renderItem={({ item, index }) => ( <TouchableHighlight onPress={hangleBoxClick(item)}> <View style={styles.container}> <Text>{item.id}</Text> <Text>{item.title}</Text> </View> </TouchableHighlight> )} /> ) }  
وكذلك بالنسبة للمكون الآخر 

الطريقة التي تعدل بها خاطئة 
فهنا أنت سيكون الناتج كالآتي
// الجزء الأول صحيح حيث أنك تستخدم الحالة السابقة لكن عند إضافة cakes // فأنت لا ترجعها مصفوفة وإنما رقم لأنك أسندتها إلى رقم { ...state, cakes: state.cakes[0].qty - 1 }; // ليكون الناتج /* { cakes: 39 } */ الحل هو أنك تقوم بالتعديل على ال cakes وتقوم بإرجاع ال array ثم إعطائه لل state case SELL_ONE_CAKE: const modifiedCakes = [ ...state.cakes ]; modifiedCakes[0].qty -= 1; return { ...state, cakes: modifiedCakes }; وبهذا يتم تعديل الرقم وترجع الحالة كما هي

مرحباً بك : 
strictMode: هي أداة لتتبع الأخطاء عن طريق إضافة بعض الفحوصات الإضافية الخاصة بها لمكون معين وأبناءه ومثلها مثل ال Fragment لا تؤثر على ال UI فقط تتبع الأخطاء  import React from 'react'; function ExampleApplication() { return ( <div> <Header /> <React.StrictMode> <div> <ComponentOne /> <ComponentTwo /> </div> </React.StrictMode> <Footer /> </div> ); } في المثال السابق لن يتم عمل فحوصات إضافية  ل ( Header - Footer ) أما ال ComponentOne - ComponentTwo ومحتوياتهم سيتم فحصهم 
مثال لما يتم فحصه: 
 1. التأكد من عدم استخدام ال ( UNSAFE_life cycly hooks ) مثل ( UNSAFE_componentWillReceiveProps - UNSAFE_componentWillMount - UNSAFE_componentWillUpdate ) 
 2. التأكد من عدم استخدام string ref
3. التأكد من عدم استخدام عناصر منتهية مثل ( findDOMNode )
4. التأكد من عدم استخدام old context API
هذه التحذيرات فقط تظهر  آثناء التطوير ( development ) وليس ال production

وعليكم السلام ورحمة الله وبركاته 
مرحباً حمادة: 
يمكنك ذلك عن طريق أن تعطي ال div تنسيق 
.div_main { height: 100vh; // أي 100 من طول الشاشة المتاح أي الطول كله } سبب أنها لم تعمل مع height: 100% هو أن النسبة المئوية ليست طول حقيقي وإنما هي طول نسبى بمعنى أنه سيأخذ طوله نسبة لطول العنصر الحاوي له ( فلو كان العنصر الحاوي له 100px وكان العنصر 100% سيأخذ أيضاً 100px ولكن لو كان العنصر ليس له أي طول ثابت وفقط يتمدد حسب طول عناصره فلن يأخذ العنصر أي طول لأنه لا توجد قيمة يتم حساب الطول بناءاً عليها ) وكمثال لو العنصر الخاص بك عنصر مباشر داخل ال body فلن يكون له طول إلا إذا أعطيت ال body طول ثابت 
جرب أن تعطي ال body طول 100vh أو 1000px وسترى النتيجة

مرحباً أحمد 
الموضوع غير متعلق ب React أو ReactNative الموضوع ببساطة عبارة عن تلاعب بالبيانات إليك مثال ( إذا كنت تريد عرض العنوان الرئيسي والعنوان الفرعي  )

لكن أرجو توضيح فكرتك لأن لديك عنوان رئيسي يحمل أكثر من عنوان فرعي فإذا أردت أي عنوان فرعي يمكنك استخدام الآتي 
renderItem={({ item }) => ( <GroupCard title={item.groupType} subTitle={item.groups[0].name || ''} /> ---> قمت باختيار أول أوبجيكت )} الرجاء توضيح فكرتك أكثر 

مرحباً عبدالحكيم:
نقاط السمعة هي تقييمات إيجابية تحصل عليها عند مشاركتك بأراء أو تعليقات تضيف فائدة للمستخدمين، أو مساهمات تقدم محتوى مفيد فيقوم المستخدمين بتقييمك عليها بالإيجاب وتزداد نقاط السمعة لديك.
وهي تفيدك في إعطائك بعض الصلاحيات والميّزات التي لا تستطيع الاستفادة منها إن كانت نقاط سمعتك منخفضة. منسمعة هي تقييم مشاركات الآخري الميزات التي تستطيع الاستفادة منها عند وصولك لـ 100 نقطة ن بالسلب والتعليق والمشاركة في مجتمعات حسوب بشكل مجهول.
كما تمكّنكَ نقاط السمعة من إنشاء مجتمع خاص بك هنا على حسوب وذلك في حال وصلت إلى 1000 نقطة سمعة.
تزداد نقاط سمعتك في حال قام أحد الأعضاء بتقييم مشاركتك أو تعليقك بشكل إيجابي وذلك بالنقر على السهم العلوي بجانب اسمك وبذلك تزداد نقاط سمعتك بواحد كل مرّة بتكرّر هذا الأمر، لاحظ أنّه لا يمكن تقييم مشاركاتك الشخصيّة.

مرحباً محمد: 
قم بعمل الآتي
 
axios .get('url') .then(res => /* الكود الذي تريد كتابته في حالة النجاح */) .catch(error => /* الكود الذي تريد كتابته في حالة الفشل */) .finally(() => /* الكود الذي تريد كتابته في حالة النجاح أو الفشل */) // اكتب بداخل finally function getNews() { // قم بتشغيل التحميل setLoading(true); axios .get('url') .then(res => /* الكود الذي تريد كتابته في حالة النجاح */) .catch(error => /* الكود الذي تريد كتابته في حالة الفشل */) .finally(() => setLoading(false)) }  

مرحباً محمد: 
يمكنك التواصل مع الدعم الفني وفتح تذكرة من هنا يمكنك أيضاً الدراسة من قناة Elzero web school ستجد جميع الكورسات التي تريدها وشرح غاية في الروعة وإذا أردت المسار بالترتيب فيمكنك الدخول على الموقع واختيار المسار الذي تريده 

مرحباً أحمد:
هذا يسمى slider ويمكنك الإطلاع عليه من هنا 

وعليكم السلام ورحمة الله وبركاته 
مرحباً بك:
أنصحك بمشاهدة هذه القناة وبالأخص هذه الدورة

مرحباً إيمان: 
 اللغة العربية مهمة لإنهاء الدورات لتفهمي المحتوي وبالتالي هي مهمة للحصول على الشهادة 

مرحباً جمال: 
الرجاء الدخول إلى الصفحة الرئيسية واختيار الدورة التي تريدها وقم بالضغط عليها 

سيتم نقلك إلى التفاصيل وقم بالضغط على سجل الآن أعلى اليمين 

سيتم نقلك إلى قسم الدفع 

قم بتسجيل بيانات بطاقتك الإتمانية ومبروك عليك الدورة.
 
أما إذا أردت الدفع بطريقة أخري فيمكنك التواصل مع فريق الدعم وفتح تذكرة من هنا وسيتم الرد عليك في أسرع وقت

قم بالدخول على الصفحة الرئيسية ستجد الكورسات موجودة هكذا 

قم بالضغط على الدورة التي تريد شراءها واستجد هذه التفاصيل هكذا 

قم بالضغط على كلمة سجل الآن أعلى يسار الصفحة سيتم نقلك لقسم التسجيل 

قم بإدخال بيانات البطاقة الإئتمانية واضغط سجل الآن 

أو لاختيار أكثر من دورة قم بالضغط على 

أسفل قسم التسجيل

وعليكم السلام ورحمة الله وبركاته 
مرحبا بك 
هو ليس شرط أن تحصل على الشهادة كي يكون لديك عمل ولكن نصيحتي لك أن تكمل دراستك هناك العديد من المبرمجين المتميزين يشتكون من عدم حصولهم على الشهادة الجامعية لأنها كانت ستوفر لهم الحصول على فرص أفضل ( لكن لا تأخذ الطريق السهل حاول في الدراسة وستنجح بإذن الله ).

السلام عليكم ورحمة الله وبركاته 
مرحباً عبدالرحمن: 
الرجاء التواصل مع الدعم الفني وفتح تذكرة وإطلاعهم على كل التفاصيل وإن شاء الله سيتم حل المشكلة