TouchableOpacity في React Native

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

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

مثال:

renderButton: function() {
  return (
    <TouchableOpacity onPress={this._onPressButton}>
      <Image
        style={styles.button}
        source={require('./myButton.png')}
      />
    </TouchableOpacity>
  );
},

مثال

import React, { Component } from 'react'
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
} from 'react-native'

export default 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}>
       <TouchableOpacity
         style={styles.button}
         onPress={this.onPress}
       >
         <Text> Touch Here </Text>
       </TouchableOpacity>
       <View style={[styles.countContainer]}>
         <Text style={[styles.countText]}>
            { this.state.count !== 0 ? 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'
  }
})

الخاصيات

يرث خاصيّات المكون 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

التوابع

‎‎setOpacityTo()‎‎

setOpacityTo((value: number), (duration: number));

تحريك المكوّن القابل للّمس إلى قيمة عتامة جديدة.

مصادر

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