React Native FlatList Grid 自定义视图

Question

我正在开发一个在平面列表网格视图中显示数据的 React 本机应用程序。为此，我遵循了我在博览会上找到的代码。我工作很好。但我需要的是，我希望第一行只呈现一个项目。这样我就可以使用空 space 先显示一些数据。

这里是世博会link。

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' });

React Native FlatList Grid 自定义视图

React Native FlatList Grid custom view

android

gridview

react-native

react-native-flatlist