المكون 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>;

مثال

إليك مثال لمكون دالة (function component):

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;

إليك مثال لمكون صنف (class component):

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

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  onPress = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this.onPress}>
          <View style={styles.button}>
            <Text>Touch Here</Text>
          </View>
        </TouchableHighlight>
        <View style={[styles.countContainer]}>
          <Text style={[styles.countText]}>
            {this.state.count ? this.state.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 App;

الخاصيات (Props)

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

activeOpacity

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

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

onHideUnderlay

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

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

onShowUnderlay

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

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

style

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

underlayColor

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

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

hasTVPreferredFocus

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

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

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

nextFocusDown

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

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

nextFocusForwad

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

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

nextFocusLeft

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

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

nextFocusRight

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

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

nextFocusUp

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

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

testOnly_pressed

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

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

المصادر

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