اضافه کردن Icon درون Button در react native
سلام دوستان.دراین آموزش متنی قصد داریم یاد بگیریم که چجوری یک icon درون Button در React Native اضافه کنیم.فرم ورود در اکثر شبکه های اجتماعی نظیر Google +,Facebook ,Twitter و فرم ورود WordPress از این تکنیک استفاده میکنند.این سایت ها همچنین از کدهای خاص خودشون برای دکمه های ثبت نام و اشتراک گزاری استفاده میکنند.اما گاهی اوقات توسعه دهندگان در طراحی نیاز دارند تا کامپوننت Button رو سفارشی سازی کنند و با یک آیکون از این کامپوننت استفاده کنند.بنابراین ما در این آموزش متنی دکمه های ورود Google+ و Facebook رو به همراه یک آیکون درونشان طراحی میکنیم.
1. ایجاد یک پوشه به نام Images درون پروژه React Native
2.دانلود آیکون زیر.در صورت تمایل میتونید از آیکون های طراحی شده توسط خودتون استفاده کنید.
3.قرار دادن این آیکون ها درون پوشه images .
4.فایل App.js رو باز کنید و کامپوننت های StyleSheet, View, Text, Image و TouchableOpacity رو import کنید
|
1 2 3 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native'; |
5.ایجاد یک View در بلاک render’s return.
|
1 2 3 4 5 6 7 8 |
render() { return ( <View style={styles.MainContainer}> </View> ); } |
6.اضافه کردن TouchableOpacity درون View .ما ابتدا دکمه ورود Facebook رو با استفاده از TouchableOpacity طراحی میکنیم.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
render() { return ( <View style={styles.MainContainer}> <TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}> <Image source={require('./Images/Facebook_Login_Button.png')} style={styles.ImageIconStyle} /> <View style={styles.SeparatorLine} /> <Text style={styles.TextStyle}> Login Using Facebook </Text> </TouchableOpacity> </View> ); } |
اسکرین شات از دکمه Facebook
7.اضافه کردن کامپوننت TouchableOpacity برای دکمه ورود Google+
|
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 |
render() { return ( <View style={styles.MainContainer}> <TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}> <Image source={require('./Images/Facebook_Login_Button.png')} style={styles.ImageIconStyle} /> <View style={styles.SeparatorLine} /> <Text style={styles.TextStyle}> Login Using Facebook </Text> </TouchableOpacity> <TouchableOpacity style={styles.GooglePlusStyle} activeOpacity={0.5}> <Image source={require('./Images/Google_Plus.png')} style={styles.ImageIconStyle} /> <View style={styles.SeparatorLine} /> <Text style={styles.TextStyle}> Login Using Google Plus </Text> </TouchableOpacity> </View> ); } |
اسکرین شات از دکمه ورود Google+
8. ایجاد استای برای کامپوننت ها
|
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 |
const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, GooglePlusStyle: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#dc4e41', borderWidth: .5, borderColor: '#fff', height: 40, borderRadius: 5 , margin: 5, }, FacebookStyle: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#485a96', borderWidth: .5, borderColor: '#fff', height: 40, borderRadius: 5 , margin: 5, }, ImageIconStyle: { padding: 10, margin: 5, height: 25, width: 25, resizeMode : 'stretch', }, TextStyle :{ color: "#fff", marginBottom : 4, marginRight :20, }, SeparatorLine :{ backgroundColor : '#fff', width: 1, height: 40 } }); |
9.کد کامل برنامه در فایل App.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 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import React, { Component } from 'react'; import { StyleSheet, View, Text, Image, TouchableOpacity} from 'react-native'; export default class App extends Component<{}> { render() { return ( <View style={styles.MainContainer}> <TouchableOpacity style={styles.FacebookStyle} activeOpacity={0.5}> <Image source={require('./Images/Facebook_Login_Button.png')} style={styles.ImageIconStyle} /> <View style={styles.SeparatorLine} /> <Text style={styles.TextStyle}> Login Using Facebook </Text> </TouchableOpacity> <TouchableOpacity style={styles.GooglePlusStyle} activeOpacity={0.5}> <Image source={require('./Images/Google_Plus.png')} style={styles.ImageIconStyle} /> <View style={styles.SeparatorLine} /> <Text style={styles.TextStyle}> Login Using Google Plus </Text> </TouchableOpacity> </View> ); } } const styles = StyleSheet.create({ MainContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', margin: 10 }, GooglePlusStyle: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#dc4e41', borderWidth: .5, borderColor: '#fff', height: 40, borderRadius: 5 , margin: 5, }, FacebookStyle: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#485a96', borderWidth: .5, borderColor: '#fff', height: 40, borderRadius: 5 , margin: 5, }, ImageIconStyle: { padding: 10, margin: 5, height: 25, width: 25, resizeMode : 'stretch', }, TextStyle :{ color: "#fff", marginBottom : 4, marginRight :20, }, SeparatorLine :{ backgroundColor : '#fff', width: 1, height: 40 } }); |
اسکرین شات در اپلیکیشن Android
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید