[英]How to render Data According to Column in flat list in react native
我有名為 ProductInfo 的列。 在本專欄的前面,我想為該特定產品呈現賣家的響應。 並且 I 標題不應該呈現在每個賣家響應列的頂部的每一行中就足夠了。 查看數據對於買家 1,我有 2 個賣家,對於買家 2,我有 4 個賣家,依此類推.. 但在我的輸出中,我只在每個買家面前得到 1 個賣家
有關更多信息,請參閱世博小吃 - https://snack.expo.dev/@sohilshaikh/flatlist
這是我的代碼
import React, {useEffect, useState} from 'react';
import {
View,
Text,
Button,
TextInput,
TouchableOpacity,
StyleSheet,
ScrollView,
StatusBar,
FlatList,
} from 'react-native';
const sample = [
{id: 1, buyerId: 1, name: 'sohil', sellerId: 1, sellerId: 2},
{id: 2, buyerId: 2, name: 'sohil',sellerId: 1, sellerId: 2,sellerId: 3, sellerId: 4},
{id: 3, buyerId: 3, name: 'sohil',sellerId: 1, sellerId: 2},
{id: 4, buyerId: 4, name: 'sohil', sellerId: 1, sellerId: 2},
{id: 5, buyerId: 5, name: 'sohil',sellerId: 1, sellerId: 2,sellerId: 3, sellerId: 4,sellerId: 5, sellerId: 6},
{id: 6, buyerId: 6, name: 'sohil',sellerId:1},
];
const RFQnotificationBuyer = (props, {navigation}) => {
const [DataForEnquiry, setDataForEnquiry] = useState(sample);
const itemView = ({item}) => {
return (
<View style={styles.inputsContainer}>
<View>
<View style={{flexDirection: 'row'}}>
<View style={{marginTop: '2%'}}>
<View>
<View
style={{
width: 100,
height: 50,
justifyContent: 'center',
backgroundColor: '#f3f3f3',
alignItems: 'center',
}}>
<Text>Mobile</Text>
</View>
</View>
<View style={{flexDirection: 'row', marginTop: '1%'}}>
<View>
<View
style={{
width: 50,
height: 50,
justifyContent: 'center',
backgroundColor: '#f3f3f3',
alignItems: 'center',
}}>
<Text>IOS</Text>
</View>
</View>
<View style={{marginLeft: 1}}>
<View
style={{
width: 50,
height: 50,
justifyContent: 'center',
backgroundColor: '#f3f3f3',
alignItems: 'center',
}}>
<Text>100</Text>
</View>
</View>
</View>
</View>
<ScrollView horizontal>
{!item.sellerId || (
<View style={{flexDirection: 'row'}}>
<View style={{marginLeft: 10}}>
<Text>Seller Profile</Text>
<Text>View Remark</Text>
<Text>Unit/Price</Text>
<View
style={{
width: 60,
height: 50,
justifyContent: 'center',
backgroundColor: '#f3f3f3',
alignItems: 'center',
}}>
<Text>{item.sellerId}</Text>
</View>
</View>
</View>
)}
</ScrollView>
</View>
</View>
</View>
);
};
return (
<View style={{flex: 1, backgroundColor: '#ffffff'}}>
<StatusBar backgroundColor="#e71013" barStyle="light-content" />
<View style={styles.container}>
<View style={{height: 550}}>
<FlatList
data={DataForEnquiry}
renderItem={itemView}
showsVerticalScrollIndicator={false}
keyExtractor={(item, index) => index.toString()}
/>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white',
},
});
export default RFQnotificationBuyer;
您可以使用ScrollView
來實現該 UI。
在您的示例數據中,將所有sellerId
存儲在一個數組中。
這是完成的應用程序: Expo Snack
輸出:
完整源代碼:
import React, { useEffect, useState } from 'react';
import {
View,
Text,
Button,
TextInput,
TouchableOpacity,
StyleSheet,
ScrollView,
StatusBar,
FlatList,
} from 'react-native';
import MainBox from './MainBox';
import SecondaryBox from './SecondaryBox';
const sample = [
{ id: 1, buyerId: 1, name: 'sohil', sellerId: [1, 2] },
{
id: 2,
buyerId: 2,
name: 'sohil',
sellerId: [1, 2, 3, 4],
},
{ id: 3, buyerId: 3, name: 'sohil', sellerId: [1, 2] },
{ id: 4, buyerId: 4, name: 'sohil', sellerId: [1, 2] },
{
id: 5,
buyerId: 5,
name: 'sohil',
sellerId: [1, 2, 3, 4, 5, 6],
},
{ id: 6, buyerId: 6, name: 'sohil', sellerId: [1] },
];
const RFQnotificationBuyer = (props, { navigation }) => {
const [dataForEnquiry, setDataForEnquiry] = useState(sample);
return (
<View style={{ flex: 1, backgroundColor: '#ffffff' }}>
<StatusBar backgroundColor="#e71013" barStyle="light-content" />
<View style={styles.container}>
<View style={{ flexDirection: 'row' }}>
<View>
{sample.map((item) => (
<MainBox />
))}
</View>
<View style={{ backgroundColor: '', flex: 1 }}>
<ScrollView horizontal={true}>
<View>
{sample.map((item) => (
<View style={{ flexDirection: 'row' }}>
{item['sellerId']?.map((buyer) => (
<SecondaryBox sellerId={buyer} />
))}
</View>
))}
</View>
</ScrollView>
</View>
</View>
</View>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
backgroundColor: 'white',
},
});
export default RFQnotificationBuyer;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.