[英]How to render Data According to Column in flat list in react native
I have Columns named , ProductInfo.我有名为 ProductInfo 的列。 and Infront of this column I want to render seller response For That specific product.
在本专栏的前面,我想为该特定产品呈现卖家的响应。 and also I The heading Should Not be render in each row just on top of each seller response column is enough.
并且 I 标题不应该呈现在每个卖家响应列的顶部的每一行中就足够了。 Look In the data For Buyer 1 I have 2 sellers, for buyer 2 I have 4 seller and so on.. but In my output I am only getting 1 seller in front of each buyer
查看数据对于买家 1,我有 2 个卖家,对于买家 2,我有 4 个卖家,依此类推.. 但在我的输出中,我只在每个买家面前得到 1 个卖家
see expo snack also for more info - https://snack.expo.dev/@sohilshaikh/flatlist有关更多信息,请参阅世博小吃 - https://snack.expo.dev/@sohilshaikh/flatlist
Here is my code这是我的代码
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;
You can use ScrollView
to achieve that UI.您可以使用
ScrollView
来实现该 UI。
In your sample data, store all the sellerId
in a single array.在您的示例数据中,将所有
sellerId
存储在一个数组中。
Here is the finished app: Expo Snack这是完成的应用程序: Expo Snack
Output:输出:
Full Source code:完整源代码:
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.