onPress عکس با استفاده از TouchableOpacity در react native
سلام دوستان.در این آموزش متنی قصد داریم یاد بگیریم که چجوری click listener به عکس در react native اضافه کنیم و یک پیغام به کاربر نمایش بدیم.
استفاده از تصاویر به عنوان دکمه بین توسعه دهندگان بسیار محبوب است چون با استفاده از این تکنیک در Android و Ios دکمه های جذابی طراحی میکنند.بنابراین در این آموزش متنی قصد داریم متد onPress رو به Image با استفاده از TouchableOpacity اضافه کنیم.چون Image به طور مستقیم از proper onPress پشتیبانی نمیکنه.پس بیاین شروع کنیم.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های Image,ViewStyleSheet و TouchableOpacity در بلاک import
|
1 2 3 |
import { AppRegistry, Image, StyleSheet, View, TouchableOpacity } from 'react-native'; |
3.ساخت یک پوشه جدید به نام images در پوشه اصلی پروژه و قرار دادن عکس موردنظر در این پوشه
4.ضافه کردن تگ View در بلاک render return
|
1 2 3 4 5 6 7 8 9 |
render() { return ( <View> </View> ); } |
5.اضافه کردن TouchableOpacity در بلاک render return درون تگ View
|
1 2 3 4 5 6 |
<View> <TouchableOpacity> </TouchableOpacity> </View> |
6.اضافه کردن تگ Image درون بلاک TouchableOpacity
|
1 2 3 4 5 6 7 8 9 10 |
<View> <TouchableOpacity> <Image> </Image> </TouchableOpacity> </View> |
7.ایجاد تابع callFun درون کلاس اصلی
|
1 2 3 4 5 6 7 |
// Binding function with this class. callFun = () => { alert("Image Clicked!!!"); } |
8.اضافه کردن activeOpacity و onPress به TouchableOpacity
|
1 2 3 4 5 6 7 8 9 10 11 |
<View> <TouchableOpacity activeOpacity = { .5 } onPress={ }> <Image> </Image> </TouchableOpacity> </View> |
9.فراخوانی تابع callFun در onPress
|
1 2 3 4 5 6 7 8 9 10 |
<View> <TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }> <Image> </Image> </TouchableOpacity> </View> |
10.اضافه کردن صفت Source به تگ Image قراردان مقدار آن برابر با آدرس عکس
|
1 2 3 4 5 6 7 8 |
<View> <TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }> <Image source={require('./images/sample_image_button.png')} /> </TouchableOpacity> </View> |
11.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 5 |
const styles = StyleSheet.create( { }); |
12.ایجاد کردن دو استایل Container برای View و ImageClass برای Image درون StyleSheet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, // Set content's vertical alignment. justifyContent: 'center', // Set content's horizontal alignment. alignItems: 'center', backgroundColor: '#FFF8E1', }, ImageClass: { // Setting up image width. width: 250, // Setting up image height. height: 44 } }); |
13.اضافه کردن استایل ها به تگ های Image و View
|
1 2 3 4 5 6 7 8 |
<View style = {styles.MainContainer}> <TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }> <Image source={require('./images/sample_image_button.png')} style = {styles.ImageClass} /> </TouchableOpacity> </View> |
14.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, View, TouchableOpacity } from 'react-native'; export default class Myproject extends Component { // Binding function with this class. callFun = () => { alert("Image Clicked!!!"); } render() { return ( <View style = {styles.MainContainer}> <TouchableOpacity activeOpacity = { .5 } onPress={ this.callFun }> <Image source={require('./images/sample_image_button.png')} style = {styles.ImageClass} /> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, // Set content's vertical alignment. justifyContent: 'center', // Set content's horizontal alignment. alignItems: 'center', backgroundColor: '#FFF8E1', }, ImageClass: { // Setting up image width. width: 250, // Setting up image height. height: 44 } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید