عمل render ديناميكي عن طريق مسارات الصور React Native

عمر سالم2 · 21 مارس 2021

الصور لا تعمل

import React from 'react';
import { View, Image } from 'react-native';

class DynamicImageComponent extends React.Component {
	render() {
		return (
			<Image source={this.props.source} />
		);
	}
};

class AppComponent extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			images: [
				{ source: './src/photos/01.jpg' },
				{ source: './src/photos/02.jpg' }
			]
		};
	}

	render() {
		let images = this.state.images.map(image => {
			return <DynamicImageComponent source={image.source} />
		});
	}

	return (
		<View>
			{ images }
		</View>
	);
}

إسلام عبدالعزيز · 21 مارس 2021

يجب عليك استدعاء الصور في React Native عن طريق:

سطر الـ require
باستخدام الخاصية uri بداخل source

// الطريقة الأولى
class AppComponent extends React.Component {
	constructor() {
		super();
		this.state = {
			images: [
				require('./src/photos/01.jpg'),
				require('./src/photos/02.jpg')
			]
		};
	}
}

/*** *** أو *** ***/

// الطريقة الثانية
class DynamicImageComponent extends React.Component {
	render() {
		return (
			<Image source={{ uri: this.props.source }} />
		);
	}
};

Mohammed Saber6 · 21 مارس 2021

الخطأ لديك هو في استدعاء الصور المحلية لديك طريقتين لحل المشكلة

استخدام require

this.state = {
  images: [
    { source: require('./src/photos/01.jpg') },
    { source: require('./src/photos/02.jpg') }
  ]
};

أو استخدام uri

class DynamicImageComponent extends React.Component {
	render() {
		return (
			<Image source={{ uri: this.props.source }} />
		);
	}
};

عمل render ديناميكي عن طريق مسارات الصور React Native

السؤال

عمر سالم2

2 أجوبة على هذا السؤال

Recommended Posts

إسلام عبدالعزيز

Mohammed Saber6

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية