प्रतिक्रिया देशी में दो कॉलम में आइटम कैसे प्रस्तुत करें? - प्रतिक्रिया, प्रतिक्रिया-मूल, प्रतिक्रिया-देशी-एंड्रॉइड, प्रतिक्रिया-देशी-आईओएस

मूल निवासी प्रतिक्रिया में मेरा कौशल बुनियादी है, इसलिए मैं दो स्तंभों में आइटम प्रस्तुत करना चाहता हूं, मैं इस पुस्तकालय का उपयोग कर रहा हूं https://github.com/GeekyAnts/react-native-easy-grid.

componentDidMount() {

return fetch(ConfigApp.URL+"json/data_posts.php")
.then((response) => response.json())
.then((responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson
}, function() {
});
})
.catch((error) => {
console.error(error);
});
}

वापसी

 return (
<Grid>
<Col><FlatList
data={ this.state.dataSource }
refreshing="false"
renderItem={({item}) =>
<TouchableOpacity activeOpacity={1}>
<ImageBackground source={{uri: ConfigApp.IMAGESFOLDER+item.post_image}} style={styles.background_card}>
<LinearGradient colors={["rgba(0,0,0,0.6)", "rgba(0,0,0,0.9)"]} style={styles.gradient_card}>
<Text style={styles.category_card}>{item.category}</Text>
<Text style={styles.title_card}>{item.post_title}</Text>
<Text style={styles.subcategory_card}>{item.date}</Text>
</LinearGradient>
</ImageBackground>
</TouchableOpacity>
}
keyExtractor={(item, index) => index}

/>
</Col>
</Grid>
);

उत्तर:

जबसे FlatList पहले से ही समर्थन करता है numColumns, इसलिए आप कर सकते हैं

उदाहरण

const data = [1,2,3,4]


<FlatList
data={data}
numColumns={2}
renderItem={(item) => <View style={{flex: 1, height: 200, margin: 5, backgroundColor: "red"}}/>} // Adding some margin
/>