أحمد عبد الله2

ما معنى هيدر ؟؟ ما شرح هده الهيدرز ؟ export const headersClient = { 'Content-Type': 'application/x-www-form-urlencoded', 'x-requested-api': 'ocapi', 'x-requested-with': 'XMLHttpRequest', Accept: 'application/json', };

أود ان اعرف ما معنى persistStore, persistReducer ولمادا يفضل ان استخدمهم وما فائدة المكتبة redux-persist import {persistStore, persistReducer} from 'redux-persist';

انا قمت بحل المشكلة عن طريق تسطيب المكتبة لانها لم تكن فى package.json واشتغل المشروع بنجاح الحمد لله

لا هدا ليس الحل .. عندما حملت الريبو كان صاحبها لم يقم ستطيب هده المكتبة .. وكلن وضع ربطها فى podfile لدا كل مافعلته هو تسطيب هده المكتبة

انا اقوم بعمل كلون لريبو .. وقمت بتنصيب النود موديولز بنجاح ولكن عن عمل pod install تظهر هده المشكلة فى الكوونسول Ignoring unf_ext-0.0.7.6 because its extensions are not built. Try: gem pristine unf_ext --version 0.0.7.6 Auto-linking React Native modules for target `maltevinder`: RNCAsyncStorage, RNCMaskedView, RNDateTimePicker, RNFastImage, RNGestureHandler, RNReanimated, RNScreens, RNVectorIcons, lottie-ios, lottie-react-native, react-native-cookies, react-native-document-picker, react-native-restart, and react-native-safe-area-context Analyzing dependencies Fetching podspec for `DoubleConversion` from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec` Fetching podspec for `Folly` from `../node_modules/react-native/third-party-podspecs/Folly.podspec` Fetching podspec for `glog` from `../node_modules/react-native/third-party-podspecs/glog.podspec` [!] No podspec found for `react-native-image-picker` in `../node_modules/react-native-image-picker` هدا هو ملف ال podfile الخاص بى require_relative '../node_modules/react-native/scripts/react_native_pods' require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules' platform :ios, '10.0' target 'maltevinder' do config = use_native_modules! use_react_native!(:path => config["reactNativePath"]) pod 'react-native-image-picker', :path => '../node_modules/react-native-image-picker' target 'maltevinderTests' do inherit! :complete # Pods for testing end # Enables Flipper. # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable these next few lines. use_flipper! post_install do |installer| flipper_post_install(installer) end end target 'maltevinder-tvOS' do # Pods for maltevinder-tvOS target 'maltevinder-tvOSTests' do inherit! :search_paths # Pods for testing end end

لم تجدى نفعا لاحظ اخى اننى استخدم الفانكشن كمبوننت وليس الكلاس

أنا اريد ان اقوم بعمل pagination و يكون الكارد المختار فى منتصف السكرين وليست هكدا كما فى الصورة هدا هو الكود <View style={styles.cardsContainer}> <View style={styles.cardsContainer}> <Animated.ScrollView horizontal scrollEventThrottle={1} showsHorizontalScrollIndicator={false} pagingEnabled snapToInterval={CARD_WIDTH + 20} snapToAlignment="center" > {ads.map((item, index) => { return ( <MapCard onPress={() => goToSelectedLocation(index)} style={{margin: 4}} title={item.title} image={item.image} price={item.price} /> ); })} </Animated.ScrollView> </View> // Styles cardsContainer: { height: phoneHeight * 0.22, bottom: 50, position: 'absolute', },

عندما قمت بتحويل الخريطة الى animated فانها اختفت وظهرت بلون شبيه بالرمادى ولكن marker عليها عادى .. لا اعرف ما السبب هدا هو الكود <MapView.Animated ref={mapRef} region={currentRegion} provider={PROVIDER_GOOGLE} style={{flex: 1}} onRegionChange={() => setRegion(region)} onPress={coordinate => { console.log(coordinate.nativeEvent.coordinate); return coordinate; }}> {ads.map((item, index) => ( <Marker key={index} coordinate={item.region}> <Image style={{width: 26, height: 28}} resizeMode="contain" source={require('../../assets/map/marker.png')} /> <Callout tooltip> <View style={styles.markerTitleContainer}> <Text numberOfLines={2} style={styles.markerTitle}> {item.title} </Text> </View> </Callout> </Marker> ))} </MapView.Animated>

كيف اعالج هده المشكلة ERROR Invariant Violation: Changing onViewableItemsChanged on the fly is not supported هذا هو الكود <Animated2.FlatList horizontal data={ads} keyExtractor={item => item.id.toString()} // onViewableItemsChanged={({viewableItems, changed}) => { // console.log(viewableItems[0].index); // setSelectedIndex(viewableItems[0].index); // }} onViewableItemsChanged={onViewableItemsChanged} viewabilityConfig={viewabilityConfig} style={{backgroundColor: 'red'}} contentContainerStyle={{justifyContent: 'center'}} onScrollEndDrag={() => goToSelectedLocation(selectedIndex)} renderItem={({item, index}) => { setSelectedIndex(index); console.log(index); return ( <MapCard onPress={() => goToSelectedLocation(index)} style={{margin: 4}} title={item.title} image={item.image} price={item.price} /> ); }} />

هدا هو الحل onMapViewOress={(coordinate: any) => { console.log(coordinate.nativeEvent.coordinate); setSelectedLocation(coordinate.nativeEvent.coordinate); }}

اانا استخدم رياكت ناتيف واود ان احصل على الاندكس الخاص ب الايتم المعروضة حاليا .. هدا هو الكود <Animated2.FlatList horizontal data={ads} keyExtractor={item => item.id.toString()} // onViewableItemsChanged={({viewableItems, changed}) => { // console.log(viewableItems[0].index); // setSelectedIndex(viewableItems[0].index); // }} style={{backgroundColor: 'red'}} contentContainerStyle={{justifyContent: 'center'}} onScrollEndDrag={() => goToSelectedLocation(selectedIndex)} renderItem={({item, index}) => { setSelectedIndex(index); console.log(index); return ( <MapCard onPress={() => goToSelectedLocation(index)} style={{margin: 4}} title={item.title} image={item.image} price={item.price} />

تمت الحل كودك كان يحتاج الى تعديل بسيط

للأسف يعرض لى نفس الخطأ

ظهر لى هدا الايرور TypeError: undefined is not an object (evaluating 'coordinate.latitude')

انا استطيع فتح الخريطة على الهاتف ولكنى اريد عن الضغط على اى مكان فى الخريطة فانه يطبع لى احداثياته ولو كان به مكان مميز مثلا مطعم او غيره فاريد ان اعرف كيف احصل على اسمه <SafeView> <Button title="close" onPress={onClose} /> <MapView style={{flex: 1}}></MapView> </SafeView>

شكرا اخى لكنى اود فعلها ب react native

كيف اجعل الخريطة تظهر باللغة العربية ليست الانجليزية فى الوقت الدى فيه ال simulator لغته english وليست عربى فى React Native <MapView style={{flex: 1}} region={region}> {ads.map((item, index) => ( <Marker title={item.title} description={item.description} key={index} coordinate={item.region}> <Image style={{width: 26, height: 28}} resizeMode="contain" source={require('../../assets/map/marker.png')} /> </Marker> ))} </MapView>

لا ليس بها null انا ارسلت لك الداتا

هدا هو كودى import {ads} from '../../data/ads'; import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types'; interface ItemInter { id: number; } interface ActionInter { type: string; payload: {id: number}; } const initialState = { myAllAds: ads, }; const myFavorite = (state = initialState, action: ActionInter) => { switch (action.type) { case ADD_TO_FAVORITE: const itemFav = state.myAllAds[action.payload.id - 1].isFav; console.log(itemFav); if (itemFav === true) return { ...state, myAllAds: [ ...state.myAllAds, (state.myAllAds[action.payload.id - 1].isFav = false), ], }; if (itemFav === false) return { ...state, myAllAds: [ ...state.myAllAds, (state.myAllAds[action.payload.id - 1].isFav = true), ], }; } return state; }; export default myFavorite; كيف اتفادى اضافة بيانات فارغة داخل المصفوفة ؟؟

شكرا على الاجابة ولكن لمادا تنصحنى ب redux tool-kit هل يمكنك ان تخبرنى لما هى جيدة

اريد ان اقوم بتغيير true ل false داخل array تحتوى على objects import {ads} from '../../data/ads'; import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types'; interface ItemInter { id: number; } interface ActionInter { type: string; payload: {id: number}; } const initialState = { myAllAds: ads, myFavorite: [], }; const myFavorite = (state = initialState, action: ActionInter) => { switch (action.type) { case ADD_TO_FAVORITE: const item = state.myFavorite.find( (item: ItemInter) => item.id === action.payload.id, ); if (item) return {...state}; return { ...state, myAllAds: [ ...state.myAllAds, // state.myAllAds[action.payload].isFav === false, ], myFavorite: [...state.myFavorite, action.payload], }; case REMOVE_FROM_FAVORITE: return { ...state, myFavorite: state.myFavorite.filter( favItem => favItem !== action.payload, ), }; case CLEAR_FAVORITE: return {...initialState}; } return state; }; export default myFavorite; جربت كتابة هدا الكود myAllAds: [...(state.myAllAds[action.payload].isFav = false)], ولكنه اخرج لى هدا الايرور TypeError: undefined is not an object (evaluating 'state.myAllAds[action.payload].isFav = false')

import {ADD_TO_FAVORITE, REMOVE_FROM_FAVORITE, CLEAR_FAVORITE} from '../types'; interface InitStateInter { myFavorite: []; } const initialState: InitStateInter = { myFavorite: [], }; const myFavorite = (state = initialState, action: any) => { switch (action.type) { case ADD_TO_FAVORITE: return { ...state, myFavorite: [...state.myFavorite, action.payload], }; case REMOVE_FROM_FAVORITE: return { ...state, myFavorite: state.myFavorite.filter( favItem => favItem !== action.payload, ), }; case CLEAR_FAVORITE: return {...initialState}; } return state; }; export default myFavorite; عندما اضيف منتج اخر للمفضلة فانه يتحقق ان كان موجود لايضيفة مرة اخرى

import React, {useState, FC} from 'react'; import {StyleSheet, Image, Text, TouchableOpacity} from 'react-native'; import Icon from 'react-native-vector-icons/MaterialIcons'; import {phoneHeight, phoneWidth} from '../../theme/Dimensions'; import {MyColors} from '../../theme/MyColos'; import {MyFonts} from '../../theme/MyFonts'; interface MainCard { title: string; price: number; image: any; onPress?: () => void; onFavPress?: () => void; } const MainCard: FC<MainCard> = ({image, title, price, onPress, onFavPress}) => { const [isFav, setIsFav] = useState(false); return ( <TouchableOpacity onPress={onPress} style={styles.container}> <TouchableOpacity // onPress={() => setIsFav(!isFav)} onPress={[onFavPress, () => setIsFav(!isFav)]} style={styles.iconContainer}> {isFav ? ( <Icon name="favorite-border" size={phoneWidth * 0.05} /> ) : ( <Icon name="favorite" size={phoneWidth * 0.05} color="red" /> )} </TouchableOpacity> <Image style={styles.imageBackground} source={image} resizeMode="cover" /> <Text numberOfLines={2} style={styles.title}> {title} </Text> <Text style={styles.price}>{price} SAR</Text> </TouchableOpacity> ); }; export default MainCard; هدا هو كودى والمشكلة عندى فى هدا السطر onPress={[onFavPress, () => setIsFav(!isFav)]} فى الاول كنت بعملها هكدا onPress={() => setIsFav(!isFav)} لكنى اريد ان اضيف خاصية جديدة وهو انه عندما استدعيه اضع فيه اى argment انا اريده .. هل هناك حل ام لا ؟

شكرا جزيلا .. قمت بحلها لاننى كنت اعطى ايقونة هده الخاصية

هدا هو الخطأ ERROR Warning: Failed prop type: Invalid props.style key `resizeMode` supplied to `Text`. هدا هو الكود import React, {useState} from 'react'; import {Text, StyleSheet, Image, View, TouchableOpacity} from 'react-native'; import {useNavigation} from '@react-navigation/native'; import Icon from 'react-native-vector-icons/Feather'; import Picker from 'react-native-image-crop-picker'; import SafeView from '../../components/shared/SafeView'; import LongButton from '../../components/buttons/LongButton'; import NavigationHeader from '../../components/shared/NavigationHeader'; import BasicInput from '../../components/textInputs/BasicInput'; import {phoneHeight, phoneWidth} from '../../theme/Dimensions'; import {MyColors} from '../../theme/MyColos'; import {MyFonts} from '../../theme/MyFonts'; import MainTabs from '../../navigation/MainTabs'; export default function UpdateProfileScreen({route}: any) { const navigation = useNavigation(); const item = route.params; const [userImage, setUserImage] = useState(item.image); const [canEditName, setCanEditName] = useState(false); const [canEditPhone, setCanEditPhone] = useState(false); const [canEditEmail, setCanEditEmail] = useState(false); const openGallery = () => { Picker.openPicker({ width: 300, height: 400, cropping: true, }).then(image => { console.log(image); setUserImage(image.path); }); }; return ( <> <SafeView style={styles.container}> <NavigationHeader title="تعديل بيانات الحساب" onBackPress={() => navigation.goBack()} /> <View> <Image source={{uri: userImage}} style={styles.userImage} /> <TouchableOpacity style={styles.cameraContainer} onPress={openGallery}> <Icon name="camera" size={phoneHeight * 0.03} color="white" /> </TouchableOpacity> </View> <Text style={styles.inputLabel}>اسم المستخدم</Text> <BasicInput hasIcon defaultValue={item.name} iconName="edit" iconColor={canEditName ? MyColors.darkAqua : MyColors.gray} editable={canEditName} onPress={() => setCanEditName(!canEditName)} /> <Text style={styles.inputLabel}>رقم الجوال</Text> <BasicInput hasIcon defaultValue={item.phone} iconName="edit" iconColor={canEditPhone ? MyColors.darkAqua : MyColors.gray} editable={canEditPhone} onPress={() => setCanEditPhone(!canEditPhone)} /> <Text style={styles.inputLabel}>البريد الإلكترونى</Text> <BasicInput hasIcon defaultValue={item.email} iconName="edit" iconColor={canEditEmail ? MyColors.darkAqua : MyColors.gray} editable={canEditEmail} onPress={() => setCanEditEmail(!canEditEmail)} /> <Text onPress={() => navigation.navigate('UpdatePassword')} style={styles.forgetPassword}> تعديل كلمة المرور </Text> <LongButton style={styles.button} title="حفظ التغييرات" onPress={() => console.log('Save')} /> <MainTabs /> </SafeView> {/* <Tabs profileSelected /> */} </> ); } const styles = StyleSheet.create({ container: { alignItems: 'center', }, inputLabel: { alignSelf: 'flex-end', fontFamily: MyFonts.Medium, fontSize: 15, color: MyColors.darkBlue, marginRight: phoneWidth * 0.1, marginVertical: phoneHeight * 0.01, marginTop: phoneHeight * 0.02, }, forgetPassword: { alignSelf: 'flex-end', fontFamily: MyFonts.Medium, fontSize: 15, color: MyColors.darkAqua, marginRight: phoneWidth * 0.1, marginVertical: phoneHeight * 0.01, marginTop: phoneHeight * 0.02, }, button: { marginTop: 50, }, cameraContainer: { height: phoneHeight * 0.06, width: phoneHeight * 0.06, zIndex: 1, position: 'relative', bottom: phoneHeight * 0.06, justifyContent: 'center', alignItems: 'center', backgroundColor: MyColors.darkAqua, borderRadius: phoneHeight * 0.03, }, userImage: { height: phoneHeight * 0.2, width: phoneHeight * 0.2, borderRadius: phoneHeight * 0.1, }, });