मैं एक घटक में वस्तुओं की एक सरणी (फोटो विवरण) को मैप करने का प्रयास कर रहा हूं ताकि यह उन्हें प्रत्येक पंक्ति (तीन छवियों) में तीन (3) घटकों के साथ पंक्तियों में पंक्तिबद्ध कर सके।

मैंने लूप के लिए नेस्टेड बनाने की कोशिश की है ताकि मेरे द्वारा वर्णित घटकों को प्रिंट किया जा सके लेकिन इसका कोई फायदा नहीं हुआ। मैं रिएक्ट नेटिव के लिए बिल्कुल नया हूं, लेकिन वर्षों से अन्य भाषाओं (सी, जावा, जावास्क्रिप्ट) में प्रोग्रामिंग कर रहा हूं।

यहाँ मेरा कोड अब तक है:

class PhotoList extends Component {
    render() {
        var payments = [];

        for(let j = 0; j < PHOTO_DATA.length; J++){
            payments.push(
                <View>
            )
            for(let i = 0; i < 3 || j < PHOTO_DATA.length; i++){
                j = j + 1;
                payments.push(
                    <Photo key={i} {...PHOTO_DATA.pop} press={this.props.press} />
                )
            }
            payments.push(
                </View>
            )
        }

        return (
            <View style={photoList.container}>
                <ScrollView>
                    { payments }
                    {/* {PHOTO_DATA.map((item, i) => {
                        return <Photo key={i} {...item} press={this.props.press} />
                    })} */}
                </ScrollView>
            </View>
        )
    }
}

किसी भी मदद की बहुत सराहना की जाती है, धन्यवाद!

0
nicholas knight 29 अक्टूबर 2019, 19:54

1 उत्तर

सबसे बढ़िया उत्तर

यहां समस्या यह है कि आप JSX के साथ गलत व्यवहार कर रहे हैं। JSX टैग कुछ ऐसा नहीं है जिसे आप सादे पाठ के रूप में उत्सर्जित कर सकते हैं (जैसे कि आप PHP के साथ HTML उत्सर्जित करेंगे)। जब आप अपना प्रोजेक्ट बनाते हैं, तो यह <View a={1} b={2} /> इस React.createElement('View', { a:1, b: 2}) में संकलित हो जाता है, इसलिए आपका कोड मान्य JSX नहीं है

आपको इसके लिए .map का उपयोग करना चाहिए PHOTO_DATA.map(item => <Photo key={i} /* your other props */ /> यह आपको प्रदान किए गए फोटो घटक देगा

यहां एक और समस्या यह है कि आप स्टाइल के लिए आइटम को 3 के समूहों में विभाजित करना चाहते हैं। इसके लिए आपको शैलियों का उपयोग करना चाहिए, उदा। एक पैरेंट View बनाएं, सभी रेंडर किए गए <Photo /> को अंदर रखें और अपने तत्वों को तदनुसार स्टाइल करने के लिए फ्लेक्सबॉक्स का उपयोग करें (देखें यह उत्तर यह कैसे करना है, उदाहरण के लिए)

लेकिन अगर आप अभी भी जानना चाहते हैं कि आपने शैलियों के बजाय JSX के साथ क्या किया है, तो आपको सबसे पहले करना होगा। ३ के भाग में विभाजित सरणी (यहाँ आप ३ आइटम प्रत्येक के सरणियों की सरणी के साथ समाप्त होंगे), फिर अंदर फ़ोटो के साथ दृश्य प्रस्तुत करने के लिए .map का उपयोग करें, उदाहरण के लिए

return (
    {chunkedArray.map(group =>
      <View>
        {group.map(photo => <Photo />)}
      </View>
    )}
  )
0
Max 30 अक्टूबर 2019, 01:52