المكون TouchableOpacity في React Native

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

هو غلافٌ لجعل المكوّنات تستجيب بشكل مناسبٍ لِلّمسات. عند الضغط لأسفل، تُقَلَّل عتامة (opacity) العرض المُغلَّف، ما يُعتِّمُه (أي تُخفَّض شدَّة إضاءته).

يُتَحكَّم في العتامة من خلال تغليف العروض الأبناء داخل عرض ‎‎Animated.View‎‎، والذي يُضاف إلى التسلسل الهرمي للعرض. لاحظ أن هذا قد يؤثر على التخطيط.

مثال

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

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

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

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

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

export default App;

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

import React, { Component } from "react";
import { StyleSheet, Text, TouchableOpacity, 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() {
    const { count } = this.state;
    return (
      <View style={styles.container}>
        <View style={styles.countContainer}>
          <Text>Count: {count}</Text>
        </View>
        <TouchableOpacity
          style={styles.button}
          onPress={this.onPress}
        >
          <Text>Press Here</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

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

export default App;

الخاصيات

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

‎‎style‎‎

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

‎‎activeOpacity‎‎

تُحدد ما يجب أن تكون عليه عتامة العرض المُغلَّف عندما يكون اللمس نشطًا (أي أثناء لمس المستخدم العرض). القيمة الافتراضية هي ‎‎0.2‎‎.

النوع	مطلوب
قيمة منطقيّة	لا

‎‎tvParallaxProperties‎‎

(Apple TV فقط) كائنٌ ذو خاصيات للتحكم في تأثيرات التَّخاطُل (parallax effects) في Apple TV.

• ‎‎enabled‎‎: إذا كانت ذات القيمة ‎‎true‎‎، فستُفعَّل تأثيرات التخاطل. قيمتها الافتراضيّة هي ‎‎true‎‎.
• ‎‎shiftDistanceX‎‎: قيمتها الافتراضيّة هي ‎‎2.0‎‎.
• ‎‎shiftDistanceY‎‎: قيمتها الافتراضيّة هي ‎‎2.0‎‎.
• ‎‎tiltAngle‎‎: قيمتها الافتراضيّة هي ‎‎0.05‎‎.
• ‎‎magnification‎‎: قيمتها الافتراضيّة هي ‎‎1.0‎‎.
• ‎‎pressMagnification‎‎: قيمتها الافتراضيّة هي ‎‎1.0‎‎.
• ‎‎pressDuration‎‎: قيمتها الافتراضيّة هي ‎‎0.3‎‎.
• ‎‎pressDelay‎‎: قيمتها الافتراضيّة هي ‎‎0.0‎‎.

النوع	مطلوب	المنصة
كائن	لا	iOS

‎‎hasTVPreferredFocus‎‎

(Apple TV فقط) التركيز المفضل على التلفاز (انظر توثيق المكون View).

النوع	مطلوب	المنصة
قيمة منطقية	لا	iOS

‎‎nextFocusDown‎‎

التركيز التالي في الأسفل على التلفاز (انظر توثيق المكون View).

النوع	مطلوب	المنصة
قيمة منطقية	لا	Android

‎‎nextFocusForward‎‎

التركيز التالي في الأمام على التلفاز (انظر توثيق المكون View).

النوع	مطلوب	المنصة
قيمة منطقية	لا	Android

‎‎nextFocusLeft‎‎

التركيز التالي في اليسار على التلفاز (انظر توثيق المكون View).

النوع	مطلوب	المنصة
قيمة منطقية	لا	Android

‎‎nextFocusRight‎‎

التركيز التالي في اليمين على التلفاز (انظر توثيق المكون View).

النوع	مطلوب	المنصة
قيمة منطقية	لا	Android

‎‎nextFocusUp‎‎

التركيز التالي في الأعلى على التلفاز (انظر توثيق المكون View).

النوع	مطلوب	المنصة
قيمة منطقية	لا	iOS

مصادر

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