如何在 React Native 中根据平面列表中的列呈现数据

Question

我有名为 ProductInfo 的列。在本专栏的前面，我想呈现卖家对该特定产品的回应。还有我的标题不应该在每一行中呈现在每个卖家回复列的顶部就足够了。查看数据，对于买家 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;

Answer 1

您可以使用 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;

如何在 React Native 中根据平面列表中的列呈现数据

How to render Data According to Column in flat list in react native

javascript

react-native

flatlist