कॉलम के साथ मूल निवासी FlatList प्रतिक्रिया, अंतिम आइटम चौड़ाई

Question

मैं दो कॉलम

<FlatList style={{margin:5}} 
    data={this.state.items} 
    numColumns={2} 
    keyExtractor={(item, index) => item.id } 
    renderItem={(item) => <Card image={item.item.gallery_image_url} text={item.item.name}/> } 
/> 

में मदों की एक सूची दिखाने के लिए कार्ड घटक बस कुछ शैलियों के साथ एक दृश्य है एक FlatList उपयोग कर रहा हूँ:

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', height: 130}} ></View> 

यह ठीक काम कर रहा है, लेकिन यदि आइटम की संख्या विषम है, तो अंतिम पंक्ति में केवल एक आइटम होता है और वह आइटम स्क्रीन की पूरी चौड़ाई तक फैली हुई है।

मैं आइटम को दूसरों की समान चौड़ाई में कैसे सेट कर सकता हूं?

Answer 1

कुछ चीजें आप यहाँ कोशिश कर सकते हैं Theres।

ए) कार्ड के लिए पूर्व परिभाषित चौड़ाई निर्धारित करना (शायद आपके द्वारा सेट की गई ऊंचाई के बराबर?)। फिर आप मध्य में या बाईं ओर स्थित कार्ड रखने के लिए alignItems का उपयोग कर सकते हैं - जिस पर आप यहां चाहते थे उसे सुनिश्चित करें।

बी) यदि कार्ड की संख्या भी है, तो आप इस स्थान को भरने के लिए अंत में एक खाली दृश्य जोड़ सकते हैं। भविष्य में तत्वों के लिए जगह छोड़ने की कोशिश करते समय मुझे यह विधि बहुत गुंजाइश लेकिन उपयोगी लगता है।

सी), बस alignItems: 'space-between उपयोग करते हैं, मैं इस का उपयोग करने के लिए आइटम केंद्रित करने के लिए पसंद है, लेकिन आप चौड़ाई परिभाषित करने के लिए है, या flex:0.5

की तरह कुछ का उपयोग मैं इस के साथ मदद करने के लिए flexbox में और अधिक शोध की सलाह देते हैं, के रूप में होगा इस स्थिति के संदर्भ को बताना मुश्किल है। मैं उपरोक्त विधियों में मदद मिलेगी संभालने कर रहा हूँ, लेकिन यदि नहीं, यहाँ कुछ लिंक आप को देखने के लिए के लिए कर रहे हैं -

First link

Second link

Third link

आशा इस मदद करता है। यदि आपको किसी और स्पष्टीकरण की आवश्यकता है - बस

Answer 2

आप आयाम के माध्यम से डिवाइस की वर्तमान चौड़ाई प्राप्त करने का प्रयास कर सकते हैं, कुछ गणित करें जो आप प्रस्तुत करना चाहते हैं, मार्जिन से कम करें और इसे सेट करें मिनीविड्थ और मैक्सविड्थ।

उदाहरण के लिए:

const {height, width} = Dimensions.get('window'); 
const itemWidth = (width - 15)/2; 

<View style={{ flex: 1, margin: 5, backgroundColor: '#ddd', minWidth: {this.itemWidth}, maxWidth: {this.itemWidth}, height: 130}} ></View>