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

سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری عکس ها رو در اپلیکیشن های react native از HTTP URL نمایش بدیم.همونطور که میدونید react native مستقل از پلتفرم هست(منظورم اینه برای هر دو نسخه Android و Ios این مقاله مناسبه) پس بیاین شروع کنیم.قبل از اینکه ادامه آموزش رو با هم پیش ببریم پیشنهاد میکنم دوره مقدماتی react native رو مشاهده کنید.

1.ساخت پروژه جدید

2.اضافه کردن کامپوننت Image در بلاک import

import {
 AppRegistry, Image
} from 'react-native';

import {

AppRegistry, Image

} from 'react-native';

3.ایجاد متغیر از نوع let در بلاک render

let Image_Http_URL ;

1	let Image_Http_URL ;

4.قرار دادن مقدار متغیر برابر با URL

let Image_Http_URL ={ uri: 'https://reactapp.ir/wp-content/uploads/es6.jpg'};

1	let Image_Http_URL ={ uri: 'https://reactapp.ir/wp-content/uploads/es6.jpg'};

5.اضافه کردن تگ Image در بلاک render return

return (
 <Image />
 );

return (

);

6.اضافه کردن Source attribute رو در تگ Image و قرار دادن مقدار آن برابر با متغیر Image_Http_URL

return (
 <Image source={Image_Http_URL}} />
 );

return (

);

7.اضافه کردن استایل inline رو به تگ Image

return (
 <Image source={Image_Http_URL} style = {{height: 200, resizeMode : 'stretch', margin: 5 }} />
 );

return (

);

8.کد کامل برنامه در فایل index.js

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);

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 (

);

}

AppRegistry.registerComponent('Myproject', () => Myproject);

2 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

چجوری میشه آدرس ها رو داینامیک داد؟ مثلا یه عکس از دیتابیس خونده بشه؟

پاسخ

علیرضا گفت:

مارس 22, 2018 در 2:48 ب.ظ

سلام ، عیدتون مبارک ، زمانی که شما میخواید یه عکس رو آپلود کنید در سرور ، باید آدرس عکس رو در دیتابیس ذخیره کنید ؛ برای آپلود عکس میتونید از این تله فیلم آموزشی که ضبط کردیم استفاده کنید
https://goo.gl/Pz5pzy

پاسخ

مطالب زیر را حتما مطالعه کنید

رضا گفت:

مارس 22, 2018 در 12:56 ب.ظ

چجوری میشه آدرس ها رو داینامیک داد؟ مثلا یه عکس از دیتابیس خونده بشه؟

پاسخ
- علیرضا گفت:
  
  مارس 22, 2018 در 2:48 ب.ظ
  
  سلام ، عیدتون مبارک ، زمانی که شما میخواید یه عکس رو آپلود کنید در سرور ، باید آدرس عکس رو در دیتابیس ذخیره کنید ؛ برای آپلود عکس میتونید از این تله فیلم آموزشی که ضبط کردیم استفاده کنید
  https://goo.gl/Pz5pzy
  
  پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

2 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ