المكون TouchableNativeFeedback في ReactNative

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

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

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

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

مثال

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

const randomHexColor = () => {
  return "#000000".replace(/0/g, function() {
    return (~~(Math.random() * 16)).toString(16);
  });
};
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 styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingTop: Constants.statusBarHeight,
    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

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

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

nextFocusForwad

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

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

nextFocusLeft

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

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

nextFocusRight

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

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

nextFocusUp

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

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

مرجع الدوال

‎SelectableBackground()‎

static SelectableBackground(rippleRadius: ?number)

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

‎selectableBackgoundBorderless()‎

static SelectableBackgroundBorderless(rippleRadius: ?number)

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

‎Ripple()‎

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

تُنشئ صنف يمثل تأثير التموج بلون معين، فإذا كانت قيمة الخاصية borderless هي true يُعرض التموج خارج إطار العنصر.

المعاملات

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

‎canUseNativeBackground()‎

static canUseNativeForeground()

المصادر

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