कुछ प्रतिक्रियाशील मूल छवि बाइंडिंग नेविगेट करने की कोशिश कर रहा हूं जो मुझे यकीन नहीं है कि कैसे आगे बढ़ना है।
अभी, निम्न कोड काम करता है।
मेरे पास वस्तुओं की एक डेटा फ़ाइल है:
MyData.js
import { Images } from '@configuration';
const myData = [
{
name: 'One',
img: Images.one
},
{
name: 'Two',
img: Images.two
},
{
name: 'Three',
img: Images.three
}
]
और images.js फ़ाइल
export const Images = {
one: require('@assets/images/one.png'),
two: require('@assets/images/two.png'),
three: require('@assets/images/three.png')
}
और मेरी प्रतिक्रिया स्क्रीन में, मैं इसे इस प्रकार प्रस्तुत करने की कोशिश कर रहा हूं:
import {MyData} from '@data';
export default function MyScreen({navigation}) {
const [myData] = useState(MyData);
return (
<View>
<FlatList data={myData} keyExtractor={(item, index) => item.name}
renderItem={({item, index}) => (
<Card image={item.img}>
</Card>
)}
</>
</View>
)
}
उपरोक्त तदनुसार छवि प्रदर्शित करता है।
अब, मैं फ़्लैटलिस्ट के डेटा बाइंडिंग को एक एपीआई से बांधना चाहता था जो निम्नलिखित JSON लौटाता है:
[
{
name: "One",
img: "Images.one"
},
{
name: "Two",
img: "Images.two"
},
{
name: "Three",
img: "Images.three"
}
]
बेशक कार्ड छवि के लिए बाध्यकारी काम नहीं करता क्योंकि आईएमजी को एक स्ट्रिंग के रूप में व्याख्या किया जाता है।
मैंने बाध्यकारी छवि को संशोधित करने का प्रयास किया:
<Card image={JSON.parse(item.img)}>
</Card>
लेकिन यह केवल एक त्रुटि फेंकता है और छवि प्रस्तुत नहीं होती है।
इस परिदृश्य में छवियों को कैसे संभाला जाएगा, इस पर बस स्टम्प्ड।
किसी भी जानकारी की सराहना की जाएगी। धन्यवाद।
2 जवाब
यदि आप अपने json में कुछ समायोजन कर सकते हैं, तो यह संभव है
बस छवि का नाम json डेटा के अंदर रखें
{
name: "One",
img: "one"
},
{
name: "Two",
img: "two"
},
{
name: "Three",
img: "three"
}
]
और जब आप इसे प्रस्तुत करना चाहते हैं तो आप इसका उपयोग कर सकते हैं
import { Images } from '@configuration';
<Card image={Images[item.img]}>
</Card>
यदि आपकी नाम संपत्ति हमेशा वास्तविक छवि स्रोत के समान होती है, तो मैं नीचे की तरह छवि यूआरएल निकालने के लिए नाम संपत्ति का उपयोग करने पर विचार करूंगा:
import { Images } from '@configuration';
<Card image={Images[item.name.toLowerCase()]}>
</Card>