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

كيف اغير لون ال Item عندما أحددها فى ال Flat List .. ريأكت ناتيف ؟

Ahmed Sawy

السؤال

السلام عليكم ..
عندى FlatList بها عدة Items وانا اريد ان عندما اضغط على Item منها تتحول لون ال Item الى لون مختلف.. مثلا لون خلفيتها يتغير لكى تظهر لليوزر ان هذه ال item هى المحددة حاليا .. كيف أفعل هذا بواسطة React Native FlatList ؟

لمن لم يفهم سؤال .. رجاء انظر الصورة .. فى الصورة عندما ضغط على احدى المربعات فانها يكون حولها حدود لونها ازرق .. واذا ضغطنا مربع اخر فان الحدود الزرقاء تذهب الى المربع الاخر .. وهكذا .. 

كيف افعل ذلك بواسطة ال Flatlist ؟؟ هل هناك prop جاهزة تدعمها ام يجب ان اكتب اكواد؟؟ 

وشكرا مقدما 
 

 

react_challenge_album_view.png

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

Recommended Posts

  • 0

مرحباً أحمد : 
هذا ما تبحث عنه 
 

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;

 

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

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

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

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

×   لقد أضفت محتوى بخط أو تنسيق مختلف.   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.

  • إعلانات

  • تابعنا على



×
×
  • أضف...