المكون Switch في React Native

مكون لإدخال قيمة منطقية.

هذا مكوّن متحكم فيه يتطلب دالة رد نداء باسم ‎‎onValueChange‎‎ تُحدِّث قيمة الخاصيّة ‎‎value‎‎ ليعكس المُكوّن ما قام به المستخدم. إذا لم تُحدَّث قيمة الخاصيّة ‎‎value‎‎، فسيستمر المكوّن في تصيير قيمة الخاصيّة ‎‎value‎‎ المُعطاة بدلًا من النتيجة المتوقعة لما قام به المستخدم.

مثال

إليك المثال التالي (تجربة حية):

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

const App = () => {
  const [isEnabled, setIsEnabled] = useState(false);
  const toggleSwitch = () => setIsEnabled(previousState => !previousState);

  return (
    <View style={styles.container}>
      <Switch
        trackColor={{ false: "#767577", true: "#81b0ff" }}
        thumbColor={isEnabled ? "#f5dd4b" : "#f4f3f4"}
        ios_backgroundColor="#3e3e3e"
        onValueChange={toggleSwitch}
        value={isEnabled}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  }
});

export default App;

الخاصيات

يرث خاصيّات المكوّن View.

‎‎disabled‎‎

إذا كانت قيمتُها القيمةَ ‎‎true‎‎، فلن يتمكن المستخدم من تبديل المُحوِّلة (switch). القيمة الافتراضية هي القيمة ‎‎false‎‎.

النوع	مطلوب
قيمة منطقيّة	لا

‎‎ios_backgroundColor‎‎

لونٌ مُخصّص للخلفية على نظام التشغيل iOS. يمكن رؤية لون الخلفية هذا عندما تكون قيمة المحوّلة ‎‎false‎‎ أو عندما تكون المحوّلة مُعطلة (وتكون المحوّلة شفافة).

النوع	مطلوب
لون	لا

‎‎onChange‎‎

تُستدعى عندما يحاول المستخدم تغيير قيمة المحوّلة. تستقبل حدث التغيير كمعامل. إذا كنت ترغب في استقبال القيمة الجديدة فقط، فاستخدم ‎‎onValueChange‎‎ بدلاً من ذلك.

النوع	مطلوب
دالة	لا

‎‎onValueChange‎‎

تُستدعى عندما يحاول المستخدم تغيير قيمة المحوّلة. تستقبل القيمة الجديدة كمعامل. إذا كنت ترغب في استقبال حدثٍ عوضًا عن ذلك، فاستخدم ‎‎onChange‎‎.

النوع	مطلوب
دالة	لا

‎‎thumbColor‎‎

لون قبضة التحويل الأماميّة. إذا عُيِّنت قيمة لهذه الخاصيّة على نظام التشغيل iOS، فستفقد قبضة التحويل ظِلّها.

النوع	مطلوب
لون	لا

‎‎trackColor‎‎

ألوان مُخصّصة لمسار المحوّلة.

ملاحظة على iOS: عندما تكون قيمة المحوّلة القيمةَ ‎‎false‎‎، فإنّ المسار ينكمش إلى الحد. إذا أردت تغيير لون الخلفية المكشوفة من طرف المسار المنكمش، فاستخدم الخاصيّة ‎‎ios_backgroundColor‎‎.

النوع	مطلوب
كائن: {false: color, true: color}‎‎	لا

‎‎value‎‎

قيمة المُحوِّلة. إذا كانت القيمةَ ‎‎true‎‎، فهذا يعني أن المُحوِّلة في وضع التشغيل. القيمة الافتراضية هي ‎‎false‎‎.

النوع	مطلوب
قيمة منطقيّة	لا

مصادر

• صفحة Switch في توثيق React Native الرسمي.