प्रतिक्रिया मूल

Question

का उपयोग कर चिनाई/Pinterest कॉलम क्या चिनाई/Pinterest शैली कॉलम प्राप्त करने के लिए प्रतिक्रिया मूल में फ्लेक्सबॉक्स का उपयोग करने का कोई तरीका है?

Answer 1

प्रतिक्रिया मूल में, रिमोट छवियों को लोड पर आकार में नहीं बदला जाता है (देखें "Why not automatically resize everything")। इसके लिए फ्लेक्सबॉक्स का उपयोग करना सीमित लगेगा, क्योंकि दूरस्थ छवियों का डिफ़ॉल्ट रूप से 0x0 का आकार होगा और यदि आप वेब पर चौड़ाई या ऊंचाई सेट करते हैं तो उनके पास पक्ष अनुपात बनाए रखा नहीं जाता है।

<View aspectRatio={1}> 
    <View style={{flexDirection: 'row', flex: 1}}> 
    <Image 
     style={{flex: 1}} 
     source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}} 
    /> 
    <Image 
     style={{flex: 2}} 
     source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}} 
    /> 
    </View> 
    <View style={{flexDirection: 'row', flex: 1}}> 
    <Image 
     style={{flex: 3}} 
     source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}} 
    /> 
    <Image 
     style={{flex: 2}} 
     source={{uri: "http://edibleapple.com/wp-content/uploads/2009/11/steve-jobs-bill-gates-1991.jpg"}} 
    /> 
    </View> 
</View> 

और इस तरह लेआउट सक्षम बनाता है::

सौभाग्य से वहाँ this github pull request में चर्चा के बहुत सारे जो कोड है कि इस तरह दिखता है निर्माण करने के लिए @paramaggarwal द्वारा कुछ उत्कृष्ट कार्य करने के लिए प्रेरित है हालांकि यह बिल्कुल आवश्यक लेआउट नहीं है, मुझे पूरा यकीन है कि यह परिवर्तन फ्लेक्सबॉक्स को छवियों के संबंध में अधिक "वेब-जैसे" तरीके से उपयोग करने की अनुमति देगा। जिथब के मुताबिक, पीआर कल (3 जुलाई) के रूप में विलय करने के लिए तैयार था, इसलिए उम्मीद है कि जब तक हम इसे रिलीज में नहीं देखते हैं तब तक यह बहुत लंबा नहीं होगा।

Answer 2

मुझे लगता है कि नेटवर्क छवियों के लिए प्रतिक्रिया-मूल रिटर्न चौड़ाई/ऊंचाई तक इसका सामना करने का कोई तरीका नहीं है। इसके अलावा फ्लेक्स बाल तत्वों को अलग-अलग ऊंचाइयों से लपेटने लगते नहीं हैं। छोटे कोशिकाओं के ऊपर/नीचे स्थान है।

यदि आप उपयोगकर्ता को दो स्तंभों के साथ-साथ उपयोगकर्ता तत्वों के लिए मनमानी ऊंचाई लागू करते हैं, तो भी आप एक चिंतित परिणाम प्राप्त कर सकते हैं। केवल एकल अभिविन्यास और कॉलम की सेट संख्या के साथ काम करेगा।

बस मज़े के लिए: https://github.com/antigirl/ReactNativeFakeMasonary