المكون 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.](https://wiki.hsoub.com/ReactNative/view)

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

nextFocusLeft

انظر توثيق المكون View.](https://wiki.hsoub.com/ReactNative/view)

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

nextFocusRight

انظر توثيق المكون View.](https://wiki.hsoub.com/ReactNative/view)

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

nextFocusUp

انظر توثيق المكون View.](https://wiki.hsoub.com/ReactNative/view)

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

testOnly_pressed

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

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

المصادر

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