如何在本机反应中根据平面列表中的列呈现数据

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 来实现该用户界面。

在您的示例数据中，将所有 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;