إظهار العناصر وإخفائها باستخدام React Native

يوفر React عدة طرق لمعالجة رؤية العناصر على الصفحة. الأسلوب الشائع هو استخدام التصميم المضمن لتعيين خاصية العرض. ومع ذلك، تتطلب هذه الطريقة تصميمًا مضمنًا، مما قد يكون غير مريح ويجعل التعليمات البرمجية أقل قابلية للقراءة.

الحل الأكثر أناقة هو استخدام React State API. تتيح لك State API تحديد البيانات وإدارتها داخل مكون React. من خلال تغيير حالة المكون، يمكنك تشغيل إعادة العرض، مما يؤدي إلى تحديث واجهة المستخدم بناءً على الحالة الجديدة.

إليك كيفية إظهار أو إخفاء عنصر على الصفحة عبر حدث النقر باستخدام واجهة برمجة تطبيقات React State:

1. قم بإنشاء مكون React جديد، مثل MyComponent.
2. في طريقة العرض للمكون الخاص بك، قم بتجسيد العنصر الذي تريد إظهاره أو إخفاءه واستخدام العرض الشرطي لتحديد ما إذا كان العنصر يجب أن يكون مرئيًا أم لا.
3. في طريقة الإنشاء للمكون الخاص بك، قم بإنشاء متغير حالة جديد، مثل showElement، وقم بتعيينه على false.
4. أضف معالج حدث onClick إلى العنصر الذي يؤدي إلى تغيير الرؤية. في معالج الحدث، قم بتبديل متغير الحالة showElement.
5. استخدم متغير الحالة showElement في طريقة العرض لتقديم العنصر بشكل مشروط. إذا كان showElement صحيحًا، فسيكون العنصر مرئيًا. إذا كانت قيمة showElement خاطئة، فسيتم إخفاء العنصر.

فيما يلي مثال لكيفية تنفيذ هذا:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showElement: false
    };
  }

  toggleShowElement = () => {
    this.setState((prevState) => ({ showElement: !prevState.showElement }));
  };

  render() {
    return (
      

        {this.state.showElement && 
Hello World!
}
        Toggle
      
    );
  }
}

يُنشئ مقتطف التعليمات البرمجية هذا مكون React جديدًا يسمى MyComponent والذي يعرض div بالنص "Hello World!" عندما يكون متغير الحالة showElement صحيحًا. ويتضمن أيضًا زرًا يقوم بتبديل رؤية "Hello World!" عنصر.