المكون TouchableHighlight في ReactNative

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

يُستعمل مثل حاوية تجعل العناصر تستجيب لأحداث اللمس (touch events)، وعند الضغط على عنصر موجود داخل المكون TouchableHighlight يُصبح شفافًا قليلًا، وبذلك يظهر اللون الخلفي خلاله، مما يتسبب في تعتيم خلفية الواجهة (View).

تظهر الطبقة الخلفية المُشار إليها أعلاه بسبب وضع العنصر داخل مكوّن الواجهة View الذي يؤثر على تخطيط الشاشة، وقد تتسبب في حدوث آثار غير مرئية غير مرغوب فيها إذا لم تُعامل معاملةً صحيحة.

يجب أن يكون للمكون TouchableHighlight ابن واحد فقط، وعند عدَّة ابناء يجب وضعهم داخل المكون View.

مثال

function MyComponent(props) {
  return (
    <View {...props} style={{ flex: 1, backgroundColor: '#fff' }}>
      <Text>My Component</Text>
    </View>
  );
}

<TouchableHighlight
  activeOpacity={0.6}
  underlayColor="#DDDDDD"
  onPress={() => alert('Pressed!')}>
  <MyComponent />
</TouchableHighlight>;

مثال

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

const TouchableHighlightExample = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(count + 1);

  return (
    <View style={styles.container}>
      <TouchableHighlight onPress={onPress}>
        <View style={styles.button}>
          <Text>Touch Here</Text>
        </View>
      </TouchableHighlight>
      <View style={styles.countContainer}>
        <Text style={styles.countText}>
          {count ? count : null}
        </Text>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  },
  countText: {
    color: "#FF00FF"
  }
});

export default TouchableHighlightExample;

الخاصيات (Props)

activeOpacity

تُحدد نسبة شفافية العنصر الموجود داخل المكوّن TouchableHighlight عند الضغط عليه، وتأخذ قيمًا بين صفر وواحد، والقيمة الإفتراضية لهذه الخاصية هي 0.85. يتطلب تشغيل هذه الخاصية أن تكون الخاصية underlayColor مُفعَّلة.

النوع	مطلوب
عدد (number)	لا

onHideUnderlay

دالة تُستدعَى تلقائيًا عندما تُخفى الطبقة الخلفية (underlay).

النوع	مطلوب
دالة (function)	لا

onShowUnderlay

دالة تُستدعى تلقائيًا عند إظهار الطبقة الخلفية.

النوع	مطلوب
دالة (function)	لا

style

النوع	مطلوب
View.style	لا

underlayColor

تُحدِّد لون الطبقة الخلفية الظاهرة من خلال المكون TouchableHighlight عند الضغط عليه.

النوع	مطلوب
(color)	لا

hasTVPreferredFocus

تعمل فقط على أجهزة Apple TV.

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

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

nextFocusDown

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

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

nextFocusForwad

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

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

nextFocusLeft

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

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

nextFocusRight

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

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

nextFocusUp

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

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

testOnly_pressed

هذه الخاصية مفيدة أثناء إختبار التطبيق.

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

المصادر

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