المكون TouchableNativeFeedback في ReactNative

ملاحظة: إذا كنت تريد طريقةً أكثر شمولية للتعامل مع عناصر الإدخال باللمس فاطّلع على واجهة Pressable.

يُستعمل المكون TouchableNativeFeedback للاستجابة لأحداث اللمس على أجهزة أندرويد. ويستخدِم الحالة الأصلية المرسومة لعرض الملاحظات.

يجب أن يكون للمكون TouchableHighlight ابن واحد فقط وذلك لأنَّ تكوينه يعتمد على استبدال هذا الابن بعقدة RTCView وتعيين بعض الخصائص الإضافية عليها. وعند عدَّة أبناء يجب وضعهم داخل المكون View.

يمكن تخصيص خلفية عرض التعليقات باستخدام خاصية background.

مثال

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

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

const App = () => {
  const [rippleColor, setRippleColor] = useState(randomHexColor());
  const [rippleOverflow, setRippleOverflow] = useState(false);
  return (
    <View style={styles.container}>
      <TouchableNativeFeedback
        onPress={() => {
          setRippleColor(randomHexColor());
          setRippleOverflow(!rippleOverflow);
        }}
        background={TouchableNativeFeedback.Ripple(rippleColor, rippleOverflow)}
      >
        <View style={styles.touchable}>
          <Text style={styles.text}>TouchableNativeFeedback</Text>
        </View>
      </TouchableNativeFeedback>
    </View>
  );
};

const randomHexColor = () => {
  return "#000000".replace(/0/g, function() {
    return (~~(Math.random() * 16)).toString(16);
  });
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: StatusBar.currentHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  touchable: { flex: 0.5, borderColor: "black", borderWidth: 1 },
  text: { alignSelf: "center" }
});

export default App;

الخاصيات

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

background

تُحدد نوع الخلفية التي يجب استعمالها لعرض ردود الأفعال عند اللمس، وتأخذ كائن (Object) يحتوي على الخاصية type والتي تُحدّد نوع الخلفية وبيانات إضافية تعتمد على النوع المُحدَّد. ويُفضَّل استخدام إحدى الطرق الثابتة لإنشاء هذا القاموس.

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

useForeground

تضيف تأثير التموج إلى مقدمة العرض عندما تكون قيمتها true. تكون هذه الخاصية مفيدةً إذا كانت لأحد العناصر الأبناء خلفيةً خاصةً به، أو إذا كنت تريد عرض صور في الخلفية ولا تريدها أن تتغطى بتأثير التموج.

ملاحظة: تحقّق من ()TouchableNativeFeedback.canUseNativeForeground قبل استخدام هذه الخاصية، وذلك لأنها متاحة فقط على الاصدار السادس من نظام التشغيل أندرويد والإصدارات اللاحقة له، وعند استخدامها على إصدارات قديمة سيتسبب ذلك في ظهور تحذيرات والعودة للخلفية.

النوع	مطلوب
قيمة منطقية (bool)	لا

hasTVPreferredFocus

تعمل فقط على أجهزة Apple TV وتحدد التركيز المفضل.

أُنظر توثيق المكوّن View.

النوع	مطلوب	نظام التشغيل
قيمة منطقية (bool)	لا	أندرويد

nextFocusDown

تحدد التركيز التالي عند الضغط للأسفل على أجهزة التلفاز TV. أُنظر توثيق المكوّن View.

النوع	مطلوب	نظام التشغيل
قيمة منطقية (bool)	لا	أندرويد

nextFocusForwad

تحدد التركيز التالي عند الضغط للأمام على أجهزة التلفاز TV.أُنظر توثيق المكوّن View.

النوع	مطلوب	نظام التشغيل
قيمة منطقية (bool)	لا	أندرويد

nextFocusLeft

تحدد التركيز التالي عند الضغط لليسار على أجهزة التلفاز TV.أُنظر توثيق المكوّن View.

النوع	مطلوب	نظام التشغيل
قيمة منطقية (bool)	لا	أندرويد

nextFocusRight

تحدد التركيز التالي عند الضغط لليمين على أجهزة التلفاز TV.أُنظر توثيق المكوّن View.

النوع	مطلوب	نظام التشغيل
قيمة منطقية (bool)	لا	أندرويد

nextFocusUp

تحدد التركيز التالي عند الضغط للأعلى على أجهزة التلفاز TV.أُنظر توثيق المكوّن View.

النوع	مطلوب	نظام التشغيل
قيمة منطقية (bool)	لا	أندرويد

التوابع

‎SelectableBackground()‎

static SelectableBackground(rippleRadius: ?number)

تُنشئ صنف يمثل الخلفية الإفتراضية لمظهر نظام التشغيل للعناصر القابلة للتحديد. يُحدِّد المعامل rippleRadius نصف قطر تأثير التموج.

‎selectableBackgoundBorderless()‎

static SelectableBackgroundBorderless(rippleRadius: ?number)

تُنشئ صنف يمثل الخلفية الإفتراضية لمظهر نظام التشغيل للعناصر القابلة للتحديد التي ليس لها إطارات (‎?android:attr/selectableItemBackgroundBorderless)، ويُحدد المعامل rippleRadius نصف قطر تأثير التموج. متاح على واجهة Android ذات المستوى 21 وما بعد.

‎Ripple()‎

static Ripple(color: string, borderless: boolean, rippleRadius: ?number)

تُنشئ صنف يمثل تأثير التموج بلون معين، فإذا كانت قيمة الخاصية borderless هي true يُعرض التموج خارج إطار العنصر (انظر إلى الأزرار actionbar الأصيلة لمثال على ذلك السلوك). هذا النوع من الخلفيات متاح على واجهة Android ذات المستوى 21 وما بعد.

المعاملات:

الإسم	النوع	مطلوب	الوصف
color	سلسلة نصية (string)	نعم	يُحدد لون تأثير التموج.
borderless	قيمة منطقية (boolean)	نعم	يُحدد ما إذا كان تأثير التموج سيعرض داخل إطار العنصر أم خارجه.
rippleRadius	عدد؟ (?number)	لا	يُحدد نصف قطر تأثير التموج.

‎canUseNativeBackground()‎

static canUseNativeForeground()

المصادر

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