كيف اعمل مكونات Radio في Ract Native

يوجد مكتبة جاهزة يمكنها تسهيل عمل ما سبق،

يمكننا تنزيل هذه المكتبة عن طريق كتابة ما يلي:

npm install radio-buttons-react-native --save

الآن يمكننا استعمال هذه المكتبة كما يلي:

import RadioButtonRN from 'radio-buttons-react-native';

const data = [
{
  label: 'data 1'
 },
 {
  label: 'data 2'
 }
];

<RadioButtonRN
  data={data}
  selectedBtn={(e) => console.log(e)}
/>

هنا في البداية نقوم بتضمين المكتبة.

من ثم نقوم بتعريف البيانات التي تعرف الأزرار التي نريدها، هذه البيانات يجب أن تكون لائحة من الأغراض كل غرض يحوي على الخاصية label و التي تمثل النص الذي يتبع لكل زر.

بعد ذلك يمكننا استعمال الوسم RadioButtonRN و الذي نمرر له البيانات بالإضافة يمكننا استعمال الخاصية selectedBtn لتعريف تابع يقوم بتنفيذ أمر ما عند النقر على هذا الزر.

يمكنك الإطلاع على أية تفاصيل أخرى عن المكتبة من هنا.

يمكنك بسهولة إنشاء radio button في إطار العمل react native من خلال إستعمال widgets المتوفرة في الإطار المذكور بمعية التنسيق المناسب وبمساعدة JavaScript . لاحظ المثال التالي حيث نقوم بإنشاء الزر المطلوب من الصفر وإستعماله.

	

import React, { useState } from "react";
import { StyleSheet, Text, View, TouchableOpacity } from "react-native";

const RadioButton = ({ onPress, selected, children }) => {  
  // props في كل مرة نريد إستعمال المكون نقوم بإستيراده وتعويض قيم
  return (
    <View style={styles.radioButtonContainer}>
        {/* ننشئ الحافظة الرئيسية */}
      <TouchableOpacity onPress={onPress} style={styles.radioButton}>
          {/* نفعل قابلية الضغط على أيقونة العنصر*/}
        {selected ? <View style={styles.radioButtonIcon} /> : null}
      </TouchableOpacity>
      <TouchableOpacity onPress={onPress}>
        {/* نفعل قابلية الضغط على العنصر*/}
        <Text style={styles.radioButtonText}>{children}</Text>
        {/* children أي محتوى نضعه داخل الزر */}
        {/*  أي محتوى نضعه داخل الزر يكون قابل للضغط */}
      </TouchableOpacity>
    </View>
  );
};

const App = () => {
  // لنفرض أن لديك مجموعة من الأزراز يمثل كل منها أختياراً وتريد من المستخدم أن يختار واحد منها
  const [isLiked, setIsLiked] = useState([
    { id: 1, value: true, name: "صنعاء", selected: false },
    { id: 2, value: false, name: "تعز", selected: false },
    { id: 3, value: false, name: "اليمن", selected: false }
  ]);

  const onRadioBtnClick = (item) => { // عندما يختار المستخدم أحد الأزرار يتم تحديث حالته فيصبح شكله مميزاً بحالة الإختيار بينما يتم إزالة الشكل المميز من باقي الأزرار
    let updatedState = isLiked.map((isLikedItem) =>
      isLikedItem.id === item.id
        ? { ...isLikedItem, selected: true }
        : { ...isLikedItem, selected: false }
    );
    setIsLiked(updatedState);
  };

  return (
    <View style={styles.app}>

      {isLiked.map((item) => ( //لها render لاحظ أننا نقوم بالمرور على جميع البيانات المعرفة للأزرار لغرض عمل
        <RadioButton
          onPress={() => onRadioBtnClick(item)}
          {/* ربط الضغط على الزر بدالة مسبقة التعريف لغرض تحديث حالة الزر */}
          selected={item.selected}
          key={item.id}
        >
          {item.name} {/* لاحظ أن المحتوى هنا هو أسم العنصر ولكن يمكن وضع أي شئ مثلاُ أيقونة أو نص */}
        </RadioButton>
      ))}
    </View>
  );
};

//HTML في  Radio Button ليصبح شبيهاً الى حد ما بالزر التقليدي  Radio Button هنا نصمم شكل ال
const styles = StyleSheet.create({
  app: {
    marginHorizontal: "auto",
    maxWidth: 500
  },
  header: {
    padding: 20
  },
  title: {
    fontWeight: "bold",
    fontSize: "1.5rem",
    marginVertical: "1em",
    textAlign: "center"
  },
  radioButtonContainer: {
    flexDirection: "row",
    alignItems: "center",
    marginBottom: 5
  },
  radioButton: {
    height: 20,
    width: 20,
    backgroundColor: "#F8F8F8",
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "#E6E6E6",
    alignItems: "center",
    justifyContent: "center"
  },
  radioButtonIcon: {
    height: 14,
    width: 14,
    borderRadius: 7,
    backgroundColor: "#98CFB6"
  },
  radioButtonText: {
    fontSize: 16,
    marginLeft: 16
  },
  text: {
    lineHeight: 30,
    fontSize: 20,
    marginVertical: 5
  }
});

export default App;