اذهب إلى المحتوى
  • 0

كيف اجعل الكمبوننت reusable عن طريق جعل ال onPress عبارة عن param لكى يتم تمريره وعمل وظائف اخرى فى اماكم متفرقة

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

السؤال

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 انا اريده .. هل هناك حل ام لا ؟

رابط هذا التعليق
شارك على الشبكات الإجتماعية

Recommended Posts

  • 0

حبذا لو استخدمت دالة خارجية ثم قمت بعملك هناك وتمرير ما تريد

const MainCard = ({ image, title, price, onPress, onFavPress }) => {
  const [isFav, setIsFav] = useState(false);

  const onPress1 = (params) => {//يمكنك تمرير ما تريد هنا
      setIsFav(!isFav);
      //يمكنك التعامل هنا
  }

  return (
    <TouchableOpacity onPress={onPress} style={styles.container}>
      <TouchableOpacity
        // onPress={() => setIsFav(!isFav)}
        onPress={onPress1}
        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>
  );
};

 

رابط هذا التعليق
شارك على الشبكات الإجتماعية

انضم إلى النقاش

يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.

زائر
أجب على هذا السؤال...

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   جرى استعادة المحتوى السابق..   امسح المحرر

×   You cannot paste images directly. Upload or insert images from URL.

  • إعلانات

  • تابعنا على



×
×
  • أضف...