मान लें कि मेरे पास <ListingCard/> घटक a . के अंदर हैं <ScrollView/>। मैं जो चाहता हूं वह एक कंटेनर वर्ग पर उन <ListingCard/> को एक साथ प्रस्तुत करना है।

यहाँ मैंने अब तक क्या प्रयास किया है:

<ListingCard/>

const ListingCard = (props) => {
    return (
        <View style={styles.container}>
          <Text>This is ListingCard Component</Text>
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
      //flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      height: 150,
      width: Dimensions.get('window').width / 2 - 6,
      backgroundColor: colors.WHITE,
      borderRadius: 5,
      marginHorizontal:10,
      marginBottom: 10
    },
  });


export default ListingCard;

यहां बताया गया है कि मैंने <ListingCard/> का उपयोग कैसे किया:

  render() {
        const { currentCategory } = this.state;
        return (
            <Drawer
                ref={(ref) => this._drawer = ref}
                type="static"
                onOpenStart={() => {
                    this.setState({
                        isDrawerOpen: true,
                    })
                }}
                onClose={() => {
                    this.setState({
                        isDrawerOpen: false,
                    })
                }}
                content={<SideFilterMenu />}
                tapToClose={true}
                side={'right'}
                openDrawerOffset={0.2} // 20% gap on the right side of drawer
                panCloseMask={0.2}
                closedDrawerOffset={-3}
            >
                <View style={styles.container}>
                    <CustomHeader
                        onPress={() => this.handleFilterPress()}
                        headerText={currentCategory && currentCategory.categoryName}
                        isIconVisible={true}
                        rightButtonText={'Filtrele'}
                        onIconPress={() => this.handleBackPress()}
                    />
                    <ScrollView 
                    style={{flex:1}}
                    contentContainerStyle={styles.cardContainer}
                    >
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                            <ListingCard />
                        </ScrollView>
                </View>
            </Drawer>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        //alignItems: 'center',
        //justifyContent: 'center',
        backgroundColor: colors.GENERAL_BCK,
        //paddingHorizontal: 5

    },
    cardContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

मैंने जो कोशिश की है, वह <View> कंटेनर के साथ या उसके बिना है, लेकिन इससे बिल्कुल भी मदद नहीं मिली है। इसका कारण यह है कि मैं इसे पूरा नहीं कर सका क्योंकि मैं रिएक्टनेटिव पर अपेक्षाकृत नया हूं और उन शैलियों के साथ संघर्ष कर रहा हूं। मैं उन <ListingCard/> को साथ-साथ प्रस्तुत करने में सफल नहीं हो सका। किसी भी मदद की सराहना की जाएगी, धन्यवाद।

0
AlkanV 25 अक्टूबर 2019, 15:07

1 उत्तर

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

ठीक है, मैंने इसे ठीक कर दिया है।

समस्या <ListingCard/> की चौड़ाई थी।

यह था: width: Dimensions.get('window').width / 2 - 6, जो एक ही पंक्ति में उनमें से दो को फिट करने के लिए बहुत चौड़ा था। इसलिए मैंने इसे बदल दिया: width: Dimensions.get('window').width / 2 - 20, और वोइला! यह काम किया है।

0
AlkanV 25 अक्टूबर 2019, 12:24