التعامل مع اللمسات في React Native

التعامل مع اللمسات (Touches)

يتفاعل المستخدمون مع تطبيقات الجوال من خلال اللمس. يمكنهم استخدام مزيج من الإيماءات (gestures)، كالضغط على زرٍّ أو تصفّح قائمة عبر التمرير (scrolling) أو تكبير خريطةٍ وما إلى ذلك. يوفر React Native مكوّناتٍ للتعامل مع مختلف أنواع الإيماءات الشائعة، بالإضافة إلى نظامِ مجيبِ إيماءاتٍ (gesture responder system) شاملٍ للسماح بالتعرف على إيماءات أكثر تقدمًا، ولكن الزرّ البسيطَ هو الأهمّ في البداية.

عرض زر بسيط

المُكوّنُ Button مكوّنُ زرٍّ أساسي يُعرَض بشكل جميل على جميع المنصّات. هذا مثال لزر بسيط:

<Button
  onPress={() => {
    Alert.alert('لقد ضغطت على الزر');
  }}
  title="اضغط هنا"
/>

سيعرض المثال أعلاه لافتةً زرقاء (label) على نظام iOS، ومستطيلًا أزرقًا مستديرًا مع نص أبيض على Android. سيستدعي الضغط على الزر الدّالةَ ‎onPress‎، والتي تعرض في هذه الحالة نافذة تنبيه منبثقة. إن أردت تغيير لون الزر فيمكنك ذلك عبر تمرير لونٍ إلى الخاصيّة ‎color‎.

يُمكنك استكشاف المكوّن ‎Button‎ باستخدام المثال أدناه. يمكنك في هذه الصفحة تحديد المنصّة عبر مفتاح التبديل بجوار (Platform) في الجزء السفلي الأيمن، ثم النقر على "Tap to Play" لمعاينة التطبيق.

import React, { Component } from 'react';
import { Alert, AppRegistry, Button, StyleSheet, View } from 'react-native';

export default class ButtonBasics extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
          />
        </View>
        <View style={styles.buttonContainer}>
          <Button
            onPress={this._onPressButton}
            title="Press Me"
            color="#841584"
          />
        </View>
        <View style={styles.alternativeLayoutButtonContainer}>
          <Button
            onPress={this._onPressButton}
            title="This looks great!"
          />
          <Button
            onPress={this._onPressButton}
            title="OK!"
            color="#841584"
          />
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
   flex: 1,
   justifyContent: 'center',
  },
  buttonContainer: {
    margin: 20
  },
  alternativeLayoutButtonContainer: {
    margin: 20,
    flexDirection: 'row',
    justifyContent: 'space-between'
  }
});

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => ButtonBasics);

المكونات القابلة لللمس (Touchables)

إذا لم يُلائم الزر الأساسي أعلاه تطبيقك، فيمكنك إنشاء زرّ خاص بك باستخدام أي من المكونات القابلة لللمس التي يوفرها React Native. توفر المكونات القابلة لللمس القدرة على التقاط اللمسات والإيماءات، ويمكنها عرض استجابة أو ردّة فعل (feedback) عند التعرف على إيماءة معيّنة. لكنّ هذه المكونات لا تأتي مع تنسيقٍ افتراضيًّا، لذا ستحتاج إلى بذل بعض الجهد لتنسيقها وتجميلها في تطبيقك.

يعتمد المكوّن القابل لللمس الذي ستستخدمه على نوع الاستجابة التي تريد تقديمها للمستخدم:

• عمومًا، يمكنك استخدام المكوّن TouchableHighlight في أي مكان تستخدم فيه زرًا أو رابطًا على الويب. سيتم تعتيم خلفية العرض (view) عندما يضغط المستخدم على الزر.
• يمكنك استخدام TouchableNativeFeedback على Android لعرض تموجات تستجيب للمسة المستخدم.
• يمكنك استخدام TouchableOpacity لتوفير استجابة عبر تخفيض تعتيم الزر وزيادة شفافيّته، ما يسمح برؤية الخلفية أثناء ضغط المستخدم على الزرّ.
• إن أردت التعامل مع لمسة دون عرض استجابة أو ردّة فعل للمستخدم، فاستخدم TouchableWithoutFeedback.

قد ترغب في بعض الحالات باكتشاف ما إذا ضغطَ المستخدم على عرضٍ وأبقى إِصْبَعَهُ لفترة محددة من الوقت (أي ضغطة مُطوَّلة [long press]). يمكن التعامل مع هذه الضغطات المطوّلة بتمرير دالّة إلى الخاصيّة ‎onLongPress‎ لأي من المكونات القابلة لللمس.

أمثلة

import React, { Component } from 'react';
import { Alert, AppRegistry, Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';

export default class Touchables extends Component {
  _onPressButton() {
    Alert.alert('You tapped the button!')
  }

  _onLongPressButton() {
    Alert.alert('You long-pressed the button!')
  }


  render() {
    return (
      <View style={styles.container}>
        <TouchableHighlight onPress={this._onPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableHighlight</Text>
          </View>
        </TouchableHighlight>
        <TouchableOpacity onPress={this._onPressButton}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableOpacity</Text>
          </View>
        </TouchableOpacity>
        <TouchableNativeFeedback
            onPress={this._onPressButton}
            background={Platform.OS === 'android' ? TouchableNativeFeedback.SelectableBackground() : ''}>
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableNativeFeedback</Text>
          </View>
        </TouchableNativeFeedback>
        <TouchableWithoutFeedback
            onPress={this._onPressButton}
            >
          <View style={styles.button}>
            <Text style={styles.buttonText}>TouchableWithoutFeedback</Text>
          </View>
        </TouchableWithoutFeedback>
        <TouchableHighlight onPress={this._onPressButton} onLongPress={this._onLongPressButton} underlayColor="white">
          <View style={styles.button}>
            <Text style={styles.buttonText}>Touchable with Long Press</Text>
          </View>
        </TouchableHighlight>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    paddingTop: 60,
    alignItems: 'center'
  },
  button: {
    marginBottom: 30,
    width: 260,
    alignItems: 'center',
    backgroundColor: '#2196F3'
  },
  buttonText: {
    padding: 20,
    color: 'white'
  }
});

// تخطّ هذا السطر إن كنت تستعمل أداة 
// Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => Touchables);

قوائم التمرير (Scrolling lists)، سحب الصفحات (swiping pages)، والتكبير عبر القرص (pinch-to-zoom)

السحب (swipe) أو المسح (pan) إيماءةٌ أخرى شائعة الاستخدام في تطبيقات الجوّال. تسمح هذه الإيماءة للمستخدم بالتمرير (scroll) عبر قائمةٍ تحتوي على عدّة عناصر، أو التمرير للتنقّل بين الصفحات. للتعامل مع هذه الإيماءات وغيرها، لنتعرّف على كيفية استخدام المكوّن ‎ScrollView‎.

مصادر

• [Handling Touches صفحة https://facebook.github.io/react-native/docs/handling-touches في توثيق React Native الرسمي.]