فیلم آموزش React Native-آموزش مدیریت ورودی های touch در React Native

آموزش مدیریت ورودی های touch در React Native

عمده ی تعامل کاربران با application های موبایل از طریق touch است. آن ها از حرکاتی ترکیبی، مثل زدن یک button، بالا و پایین کردن یک لیست، zoom روی یک نقشه و... استفاده می کنند. React Native، component هایی برای کار با انواع حرکات متداول در اختیار می گذارد. علاوه بر آن یک سیستم جامع gesture responder برای شناسایی حرکات پیچیده تر دارد. اما component پایه ای عمدتا از آن استفاده می کنیم یک button است.

آموزش پروژه محور React Native

نمایش یک button ساده

Button یک component ساده برای نمایش button است که روی همه پلتفرم ها به خوبی render می شود. مثالی ساده برای نمایش یک button در زیر می بینید:

 {
    alert('You tapped the button!');
  }}
  title="Press Me"
/>

این قطعه کد یک برچسب آبی در iOS ، و یک مستطیل گرد آبی با متن سفید در android خواهد بود. فشردن button موجب فراخوانی تابع "onPress" می شود. که در این مثال، این تابع یک pop-up هشدار نمایش می دهد. می توانید یک prop برای "color" تعیین کنید و رنگ button را تغییر دهید.

مثال زیر کارهای جالب تری با button ها می کند. می توانید خروجی آن را در android و iOS ببینید.

import React, { Component } from 'react';
import { Button, StyleSheet, View } from 'react-native';
export default class ButtonBasics extends Component {
  _onPressButton() {
    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'
  }
});

component های Touchable

اگر یک button ساده برای application تان کافی نیست، می توانید با استفاده از component های "Touchable" موجود در React Native، button های سفارشی بسازید. این component ها قابلیت دریافت حرکات را دارند، و می توانند با شناسایی حرکات فیدبک مناسب بدهند. این component ها هیچ style پیش فرضی ندارند و برای اینکه ظاهری مناسب به آنها بدهید باید کمی کار کنید.

با توجه به نوع فیدبکی که انتظار دارید می توانید از component های "Touchable" متفاوتی استفاده کنید:

عمدتا، می توانید از TouchableHighligh برای مواردی مثل یک link یا button در وب، استفاده کنید. پس زمینه ی view با فشردن button، تیره می شود.

می توانید از TouchableNativeFeedback در android برای نمایش feedback به کاربر استفاده کنید.

می توان از TouchableOpacity برای feedback دادن از طریق کاهش button opacity استفاده کرد.

اگر میخواهید فیدبکی به کاربر نشان ندهید می توانید از TouchableWithoutFeedback استفاده کنید.

در بعضی موارد ممکن است بخواهید فشردن و نگه داشتن یک view برای مدت زمان مشخصی را شناسایی کنید. این فشردن های طولانی از طریق ارسال یک تابع به onLongPress هر component "Touchable" قایل مدیریت است.

در مثال زیر می توان این موضوع را تست کرد:

فیلم آموزش React Native

import React, { Component } from 'react';
import { Platform, StyleSheet, Text, TouchableHighlight, TouchableOpacity, TouchableNativeFeedback, TouchableWithoutFeedback, View } from 'react-native';
export default class Touchables extends Component {
  _onPressButton() {
    alert('You tapped the button!')
  }
  _onLongPressButton() {
    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 {Platform.OS !== 'android' ? '(Android only)' : ''}< /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: {
    textAlign: 'center',
    padding: 20,
    color: 'white'
  }
});

بالا و پایین رفتن در لیست ها، swipe کردن، و pinch-to-zoom

از حرکات رایج دیگر در موبایل ها swipe یا pan است. این حرکت به کاربر امکان بالا و پایین رفتن در لیست ها، یا حرکت در صفحات را می دهد. برای کار با اینگونه حرکات، باید کار با ScrollView را یاد بگیریم.