الفرق بين المراجعتين ل"ReactNative/touchablehighlight"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
ط (مراجعة)
ط
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:المكون TouchableHighlight في ReactNative}}</noinclude>
+
<noinclude>{{DISPLAYTITLE:المكون TouchableHighlight في ReactNative}}</noinclude><blockquote>'''ملاحظة''': إذا كنت تريد طريقةً أكثر شمولية للتعامل مع عناصر الإدخال باللمس اطّلع على واجهة  [[ReactNative/pressable|<code>Pressable</code>]]  البرمجية.</blockquote>يُستعمل مثل حاوية تجعل العناصر تستجيب لأحداث اللمس (touch events)، وعند الضغط على عنصر موجود داخل المكون <code>TouchableHighlight</code> يُصبح شفافًا قليلًا، وبذلك يظهر اللون الخلفي خلاله، مما يتسبب في تعتيم خلفية الواجهة <code>[[ReactNative/view|View]]</code>.
'''ملاحظة''': إذا كنت تريد طريقةً أكثر شمولية للتعامل مع عناصر الإدخال باللمس اطّلع على واجهة  [[ReactNative/pressable|<code>Pressable</code>]]  البرمجية.
 
 
 
يُستعمل مثل حاوية تجعل العناصر تستجيب لأحداث اللمس (touch events)، وعند الضغط على عنصر موجود داخل المكون <code>TouchableHighlight</code> يُصبح شفافًا قليلًا، وبذلك يظهر اللون الخلفي خلاله، مما يتسبب في تعتيم خلفية الواجهة (<code>[[ReactNative/view|View]]</code>).
 
  
 
تظهر الطبقة الخلفية المُشار إليها أعلاه بسبب وضع العنصر داخل مكوّن الواجهة <code>View</code> الذي يؤثر على تخطيط الشاشة، وقد تتسبب في حدوث آثار غير مرئية غير مرغوب فيها إذا لم تُعامل معاملةً صحيحة.
 
تظهر الطبقة الخلفية المُشار إليها أعلاه بسبب وضع العنصر داخل مكوّن الواجهة <code>View</code> الذي يؤثر على تخطيط الشاشة، وقد تتسبب في حدوث آثار غير مرئية غير مرغوب فيها إذا لم تُعامل معاملةً صحيحة.
سطر 8: سطر 5:
 
يجب أن يكون للمكون <code>TouchableHighlight</code> ابن '''واحد فقط'''، وعند عدَّة ابناء يجب وضعهم داخل المكون <code>View</code>.
 
يجب أن يكون للمكون <code>TouchableHighlight</code> ابن '''واحد فقط'''، وعند عدَّة ابناء يجب وضعهم داخل المكون <code>View</code>.
  
'''مثال'''
+
انظر المثال البسيطة التالي:
  
 
<syntaxhighlight class="react" lang="javascript">function MyComponent(props) {
 
<syntaxhighlight class="react" lang="javascript">function MyComponent(props) {
سطر 25: سطر 22:
 
</TouchableHighlight>;</syntaxhighlight>
 
</TouchableHighlight>;</syntaxhighlight>
  
'''مثال'''
+
== مثال ==
 
+
[https://snack.expo.dev/@hsoubwiki/touchablehighlight-function-component-example إليك مثال لمكون دالة (function component)]:<syntaxhighlight class="react" lang="javascript">import React, { useState } from "react";
<syntaxhighlight class="react" lang="javascript">import React, { useState } from "react";
 
 
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
 
import { StyleSheet, Text, TouchableHighlight, View } from "react-native";
  
سطر 73: سطر 69:
  
 
__toc__
 
__toc__
 +
 +
[https://snack.expo.dev/@hsoubwiki/touchablehighlight-class-component-example إليك مثال لمكون صنف (class component)]:<syntaxhighlight class="react" lang="javascript">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;</syntaxhighlight>
 
== الخاصيات (Props) ==
 
== الخاصيات (Props) ==
 +
يرث من خاصيات المكون <code>[[ReactNative/touchablewithoutfeedback|TouchableWithoutFeedback]]</code>.
  
 
=== <code>activeOpacity</code> ===
 
=== <code>activeOpacity</code> ===
سطر 125: سطر 177:
 
! مطلوب
 
! مطلوب
 
|-
 
|-
| [[ReactNative/colors|(color)]]
+
| لون [[ReactNative/colors|(color)]]
 
| لا
 
| لا
 
|}
 
|}
 
=== <code>hasTVPreferredFocus</code> ===
 
=== <code>hasTVPreferredFocus</code> ===
  
تعمل فقط على أجهزة Apple TV.
+
تعمل فقط على أجهزة Apple TV وتحدد التركيز المفضل.
  
 
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
 
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
سطر 145: سطر 197:
 
=== <code>nextFocusDown</code> ===
 
=== <code>nextFocusDown</code> ===
  
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
+
تحدد التركيز التالي عند الضغط للأسفل على أجهزة التلفاز TV. أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 158: سطر 210:
 
=== <code>nextFocusForwad</code> ===
 
=== <code>nextFocusForwad</code> ===
  
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
+
تحدد التركيز التالي عند الضغط للأمام على أجهزة التلفاز TV. أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 171: سطر 223:
 
=== <code>nextFocusLeft</code> ===
 
=== <code>nextFocusLeft</code> ===
  
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
+
تحدد التركيز التالي عند الضغط لليسار على أجهزة التلفاز TV.أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 184: سطر 236:
 
=== <code>nextFocusRight</code> ===
 
=== <code>nextFocusRight</code> ===
  
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
+
تحدد التركيز التالي عند الضغط لليمين على أجهزة التلفاز TV.أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 197: سطر 249:
 
=== <code>nextFocusUp</code> ===
 
=== <code>nextFocusUp</code> ===
  
أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
+
تحدد التركيز التالي عند الضغط للأعلى على أجهزة التلفاز TV.أُنظر توثيق المكوّن [[ReactNative/view|<code>View</code>.]]
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 209: سطر 261:
 
|}
 
|}
 
=== <code>testOnly_pressed</code> ===
 
=== <code>testOnly_pressed</code> ===
هذه الخاصية مفيدة أثناء إختبار التطبيق.
+
هذه الخاصية مفيدة أثناء اختبار التطبيق.
  
 
{| class="wikitable"
 
{| class="wikitable"

مراجعة 09:07، 1 أكتوبر 2021

ملاحظة: إذا كنت تريد طريقةً أكثر شمولية للتعامل مع عناصر الإدخال باللمس اطّلع على واجهة 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 الرسمي.