اضافه کردن border به عکس در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری یک حاشیه به عکس ها در اپلیکیشن های react native برای هر دو نسخه Android و Ios اضافه کنیم.در ادامه با من همراه باشید تا بصورت گام به گام و کامل حاشیه به عکس رو در react native اضافه کنم.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های Image,StyleSheet و View در بلاک import
|
1 2 3 |
import { AppRegistry, Image, StyleSheet, View } from 'react-native'; |
3.ساخت یک پوشه جدید به نام images در پوشه اصلی پروژه و قرار دادن عکس موردنظر در این پوشه
4.اضافه کردن تگ View در بلاک render return
|
1 2 3 4 5 6 7 8 9 |
render() { return ( <View> </View> ); } |
5.اضافه کردن تگ Image در بلاک render return درون تگ View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
render() { return ( <View> <Image> </Image> </View> ); } |
6.اضافه کردن Source attribute در تگ Image
|
1 2 3 4 5 6 7 8 9 10 |
render() { return ( <View> <Image source={require('./images/sample_image.png')} /> </View> ); |
7.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 |
const styles = StyleSheet.create( { }); |
8.ایجاد کردن دو استایل Container برای View و BorderClass برای 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 29 30 31 32 |
const styles = StyleSheet.create( { MainContainer: { flex: 1, // Set content's vertical alignment. justifyContent: 'center', // Set content's horizontal alignment. alignItems: 'center', backgroundColor: '#FFF8E1', }, BorderClass: { // Setting up image width. width: 160, // Setting up image height. height: 160, // Set border width. borderWidth: 1, // Set border color. borderColor: '#F44336', } }); |
9.اضافه کردن استایل ها به تگ های Image و View
|
1 2 3 4 5 |
<View style = {styles.MainContainer}> <Image source={require('./images/sample_image.png')} style = {styles.BorderClass} /> </View> |
10.کد کامل برنامه در فایل 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 |
import React, { Component } from 'react'; import { AppRegistry, Image, StyleSheet, View } from 'react-native'; export default class Myproject extends Component { render() { return ( <View style = {styles.MainContainer}> <Image source={require('./images/sample_image.png')} style = {styles.BorderClass} /> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, // Set content's vertical alignment. justifyContent: 'center', // Set content's horizontal alignment. alignItems: 'center', backgroundColor: '#FFF8E1', }, BorderClass: { // Setting up image width. width: 160, // Setting up image height. height: 160, // Set border width. borderWidth: 1, // Set border color. borderColor: '#F44336', } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید