छवि फ़ाइल

Question

के लिए मूल उपयोग चर प्रतिक्रिया दें मुझे पता है कि प्रतिक्रियात्मक मूल में एक स्थिर छवि का उपयोग करने के लिए आपको विशेष रूप से उस छवि की आवश्यकता होती है, लेकिन मैं किसी संख्या के आधार पर एक यादृच्छिक छवि लोड करने का प्रयास कर रहा हूं। उदाहरण के लिए मेरे पास img1.png - img100.png नामक 100 छवियां हैं जो मेरी निर्देशिका में हैं। मैं निम्नलिखित

<Image source={require(`./img${Math.floor(Math.random() * 100)}.png`)}/> 

मैं जानता हूँ कि यह जानबूझकर काम नहीं करता है इसके लिए कोई तरीका यह पता लगाने की कोशिश कर रहा हूँ, लेकिन किसी भी समाधान बहुत सराहना की जाएगी।

Answer 1

जेएस में बंडल समय पर बयान की आवश्यकता होती है (जब जेएस बंडल की गणना की जाती है)। इसलिए यह require के लिए एक तर्क के रूप में चर अभिव्यक्ति को रखने के लिए समर्थित नहीं है।

संसाधनों की आवश्यकता के मामले में यह और भी अधिक कठिन है। जब आपके पास require('./someimage.png') है, तो प्रतिक्रियात्मक पैकेजर आवश्यक छवि को लोकेल करेगा और फिर इसे ऐप के साथ एक साथ बंडल किया जाएगा ताकि जब आपका ऐप चल रहा हो तो इसे "स्थैतिक" संसाधन के रूप में उपयोग किया जा सकता है (वास्तव में देव मोड में यह बंडल नहीं होगा आपके ऐप के साथ छवि लेकिन इसके बजाय छवि सर्वर से परोसा जाएगा, लेकिन इससे आपके मामले में कोई फर्क नहीं पड़ता)।

यदि आप एक स्थिर संसाधन के रूप में यादृच्छिक छवि का उपयोग करना चाहते हैं तो आपको उस छवि को बंडल करने के लिए अपने ऐप को बताना होगा। आप कुछ मायनों में यह कर सकते हैं:

1) अपने एप्लिकेशन का एक स्थिर संपत्ति के रूप में यह जोड़ कर <Image src={{uri:'name_of_the_image_in_assets.png'}}/> साथ यह करने के लिए संदर्भ (here आप इसे कैसे देशी IOS अनुप्रयोग को जोड़ सकते हैं) है

2) सभी छवियों को स्थिर रूप से पहले की आवश्यकता है। का एक रूप में sth:

var randomImages = [ 
    require('./image1.png'), 
    require('./image2.png'), 
    require('./image3.png'), 
    ... 
]; 

फिर अपने कोड में आप कर सकते हैं:

<Image src={randomImages[Math.floor(Math.random()*randomImages.length)]}/> 

3) <Image src={{uri:'http://i.imgur.com/random.jpg'}}/>

Answer 2

के साथ नेटवर्क छवि का उपयोग करें प्रतिक्रिया देशी जानवर को जानने से किसी के लिए, यह मदद करनी चाहिए :)

मैंने अतीत में कुछ साइटों का दौरा किया, लेकिन यह तेजी से निराशाजनक पाया। जब तक मैं this site here पढ़ता हूं।

यह एक अलग दृष्टिकोण है लेकिन अंततः अंत में भुगतान करता है। असल में, सबसे अच्छा तरीका आपके सभी संसाधनों को एक ही स्थान पर लोड करना होगा। निम्नलिखित संरचना पर विचार करें

app 
    |--img 
     |--image1.jpg 
     |--image2.jpg 
     |--profile 
      |--profile.png 
      |--comments.png 
     |--index.js 

index.js में, आप यह कर सकते हैं:

const images = { 
    profile: { 
     profile: require('./profile/profile.png'), 
     comments: require('./profile/comments.png'), 
    }, 
    image1: require('./image1.jpg'), 
    image2: require('./image2.jpg'), 
}; 

export default images; 

अपने विचारों में, आप इस तरह छवियों घटक आयात करने के लिए है:

import Images from './img/index'; 

render() { 
    <Image source={Images.profile.comments} /> 
} 

हर कोई है अंत करने के लिए अलग-अलग साधन, बस वह सर्वोत्तम चुनें जो आपको सबसे अच्छा लगा।