Реагировать на собственный вид сетки FlatList Grid

Question

Я разрабатываю собственное приложение, которое отображает данные в виде плоской таблицы.для этого я следовал коду, который нашел на выставке.Я работаю нормальноНо мне нужно, чтобы первая строка отображала только один элемент.так что я могу использовать пустое пространство, чтобы сначала показать некоторые данные.

вот ссылка Expo.

https://snack.expo.io/@savadks1818/react-native-flatlist-grid

и воткод

      import React from 'react';
      import { StyleSheet, Text, View, FlatList, Dimensions } from 'react-native';

      const data = [
        { key: 'A' }, { key: 'B' }, { key: 'C' }, { key: 'D' }, { key: 'E' }, { key: 'F' }, { key: 'G' }, { key: 'H' }, { key: 'I' }, { key: 'J' },
        { key: 'K' },
        // { key: 'L' },
      ];

      const formatData = (data, numColumns) => {
        const numberOfFullRows = Math.floor(data.length / numColumns);

        let numberOfElementsLastRow = data.length - (numberOfFullRows * numColumns);
        while (numberOfElementsLastRow !== numColumns && numberOfElementsLastRow !== 0) {
          data.push({ key: `blank-${numberOfElementsLastRow}`, empty: true });
          numberOfElementsLastRow++;
        }

        return data;
      };

      const numColumns = 3;
      export default class App extends React.Component {
        renderItem = ({ item, index }) => {
          if (item.empty === true) {
            return <View style={[styles.item, styles.itemInvisible]} />;
          }
          return (
            <View
              style={styles.item}
            >
              <Text style={styles.itemText}>{item.key}</Text>
            </View>
          );
        };

        render() {
          return (
            <FlatList
              data={formatData(data, numColumns)}
              style={styles.container}
              renderItem={this.renderItem}
              numColumns={3}
            />
          );
        }
      }

      const styles = StyleSheet.create({
        container: {
          flex: 1,
          marginVertical: 20,
        },
        item: {
          backgroundColor: '#4D243D',
          alignItems: 'center',
          justifyContent: 'center',
          flex: 1,
          margin: 3,
          height: Dimensions.get('window').width / numColumns, // approximate a square
        },
        itemInvisible: {
          backgroundColor: 'transparent',
        },
        itemText: {
          color: '#fff',
        },
      });

Answer 1

Вы можете сделать это, добавив новые объекты в массив данных в нужной позиции

const data = [
  { key: 'A' },
  { empty: true, key: 'xxx' },
  { empty: true, key: 'xxx' },
  { key: 'B' },
  { key: 'C' },
  { key: 'D' },
  { key: 'E' },
  { key: 'F' },
  { key: 'G' },
  { key: 'H' },
  { key: 'I' },
  { key: 'J' },
  { key: 'K' },
  { key: 'L' },
];

чтобы добавить пункт, сделайте

data.splice(1, 0, { empty: true, key: 'xxx' });