نمایش عکس از HTTP URL در react native


سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری عکس ها رو در اپلیکیشن های react native از HTTP URL نمایش بدیم.همونطور که میدونید react native مستقل از پلتفرم هست(منظورم اینه برای هر دو نسخه Android و Ios این مقاله مناسبه) پس بیاین شروع کنیم.قبل از اینکه ادامه آموزش رو با هم پیش ببریم پیشنهاد میکنم دوره مقدماتی react native رو مشاهده کنید.
1.ساخت پروژه جدید
2.اضافه کردن کامپوننت Image در بلاک import
1 2 3 |
import { AppRegistry, Image } from 'react-native'; |
3.ایجاد متغیر از نوع let در بلاک render
1 |
let Image_Http_URL ; |
4.قرار دادن مقدار متغیر برابر با URL
1 |
let Image_Http_URL ={ uri: 'https://reactapp.ir/wp-content/uploads/es6.jpg'}; |
5.اضافه کردن تگ Image در بلاک render return
1 2 3 |
return ( <Image /> ); |
6.اضافه کردن Source attribute رو در تگ Image و قرار دادن مقدار آن برابر با متغیر Image_Http_URL
1 2 3 |
return ( <Image source={Image_Http_URL}} /> ); |
7.اضافه کردن استایل inline رو به تگ Image
1 2 3 |
return ( <Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'stretch', margin: 5 }} /> ); |
8.کد کامل برنامه در فایل index.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
import { AppRegistry, Image } from 'react-native'; export default class Myproject extends Component { render() { let Image_Http_URL ={ uri: 'https://reactapp.ir/wp-content/uploads/es6.jpg'}; return ( <Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'stretch', margin: 5 }} /> ); } } AppRegistry.registerComponent('Myproject', () => Myproject); |
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
آموزش React Navigation 5
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
چجوری میشه آدرس ها رو داینامیک داد؟ مثلا یه عکس از دیتابیس خونده بشه؟
سلام ، عیدتون مبارک ، زمانی که شما میخواید یه عکس رو آپلود کنید در سرور ، باید آدرس عکس رو در دیتابیس ذخیره کنید ؛ برای آپلود عکس میتونید از این تله فیلم آموزشی که ضبط کردیم استفاده کنید
https://goo.gl/Pz5pzy