2015-03-31 10 views
24

देशी समर्थन आधार 64 एन्कोडेड छवियों को प्रतिक्रिया देता है?देशी समर्थन बेस 64 एन्कोडेड छवियों को प्रतिक्रिया देता है?

मैंने कोशिश की:

<Image source={{uri: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII='}} style={styles.image}/> 

लेकिन यह काम नहीं किया। क्या मैं बस गलत कर रहा हूं या यह समर्थित नहीं है?

उत्तर

32

मुझे लगता है कि रामसे गलत है, प्रतिक्रिया देशी base64 छवि पर एक पूरी तरह से समर्थन किया है। मैं इस

https://facebook.github.io/react-native/docs/tabbarios.html 

पाया कि यह कैसे एक आईओएस TabBarController बनाने के लिए की एक आधिकारिक उदाहरण है, और वे TabBar के आइकन में से एक के रूप में एक बेस 64 छवि का उपयोग करें।

मुझे लगता है कि आपने width और <Image/> की संपत्ति में निर्दिष्ट नहीं किया था।

मैंने अपने रिएक्ट नेटिव प्लेग्राउंड में अपनी बेस 64 छवि का उपयोग करने की कोशिश की, और यह काम करता है।

demo

प्रयोग

var base64Icon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAwBQTFRF7c5J78kt+/Xm78lQ6stH5LI36bQh6rcf7sQp671G89ZZ8c9V8c5U9+u27MhJ/Pjv9txf8uCx57c937Ay5L1n58Nb67si8tVZ5sA68tJX/Pfr7dF58tBG9d5e8+Gc6chN6LM+7spN1pos6rYs6L8+47hE7cNG6bQc9uFj7sMn4rc17cMx3atG8duj+O7B686H7cAl7cEm7sRM26cq/vz5/v767NFY7tJM78Yq8s8y3agt9dte6sVD/vz15bY59Nlb8txY9+y86LpA5LxL67pE7L5H05Ai2Z4m58Vz89RI7dKr+/XY8Ms68dx/6sZE7sRCzIEN0YwZ67wi6rk27L4k9NZB4rAz7L0j5rM66bMb682a5sJG6LEm3asy3q0w3q026sqC8cxJ6bYd685U5a457cIn7MBJ8tZW7c1I7c5K7cQ18Msu/v3678tQ3aMq7tNe6chu6rgg79VN8tNH8c0w57Q83akq7dBb9Nld9d5g6cdC8dyb675F/v327NB6////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA/LvB3QAAAMFJREFUeNpiqIcAbz0ogwFKm7GgCjgyZMihCLCkc0nkIAnIMVRw2UhDBGp5fcurGOyLfbhVtJwLdJkY8oscZCsFPBk5spiNaoTC4hnqk801Qi2zLQyD2NlcWWP5GepN5TOtSxg1QwrV01itpECG2kaLy3AYiCWxcRozQWyp9pNMDWePDI4QgVpbx5eo7a+mHFOqAxUQVeRhdrLjdFFQggqo5tqVeSS456UEQgWE4/RBboxyC4AKCEI9Wu9lUl8PEGAAV7NY4hyx8voAAAAASUVORK5CYII='; 

और इस तरह से उपयोग करने

<Image style={{width: 100, height: 50, resizeMode: Image.resizeMode.contain, borderWidth: 1, borderColor: 'red'}} source={{uri: base64Icon}}/> 
+1

हालांकि यह बेस 64 svg का समर्थन नहीं करता है, जो वास्तव में बहुत अच्छा होगा – Jesse

+0

बेस 64 छवियों का उपयोग करना एक अच्छा विचार है? निश्चित रूप से यह diffing एल्गोरिदम के प्रदर्शन को बहुत प्रभावित करेगा। – Hoffmann

+0

अभी भी मेरे लिए कोई भाग्य नहीं है, वही कोड जो मेरे लिए वेबप्लेयर पर काम करता है मेरे सिम्युलेटर पर छवि प्रस्तुत करने में विफल रहता है। –

2

मुझे नहीं लगता कि यह समर्थित है। जब तक यूआरएल में "http" या "https" नहीं होता है, इसे "स्थैतिक" छवि माना जाता है। यूआरएल एक पूर्ण पथ है

  1. हैं, तो एक फ़ाइल
  2. वरना अगर के रूप में यह लोड: कदम से

    if ([path isAbsolutePath]) { 
        image = [UIImage imageWithContentsOfFile:path]; 
    } else { 
        image = [UIImage imageNamed:path]; 
        if (!image) { 
        image = [UIImage imageWithContentsOfFile:[[NSBundle mainBundle] pathForResource:path ofType:nil]]; 
        } 
    } 
    

    कदम: कोड के माध्यम से उठा, अंतिम छवि के इन्स्टेन्शियशन करने पर निर्भर करता छवि कैश किया गया है (imageNamed), लोड कि

  3. वरना अगर छवि एक रिश्तेदार पथ है, यह एप्लिकेशन बंडल से लोड

जाहिर है कि इनमें से कोई भी बेस 64 से संबंधित नहीं है। मैं इस सुविधा जो आप यहाँ देख सकते हैं के लिए एक पुल अनुरोध बना लिया है:

https://github.com/facebook/react-native/pull/576

+0

धन्यवाद। मुझे लगता है कि यह वास्तव में उपयोगी हो सकता है क्योंकि यह जेएस पुस्तकालयों के उपयोग की अनुमति देगा जो बेस 64 छवियां उत्पन्न करता है। उदाहरण के लिए, मैं वर्तमान में एक साधारण ग्राफ उत्पन्न करना चाहता हूं। –

संबंधित मुद्दे