React Native FlatList Grid 自定义视图答案

【问题标题】：React Native FlatList Grid custom viewReact Native FlatList Grid 自定义视图
【发布时间】：2019-05-15 18:11:06
【问题描述】：

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

这里是世博会链接。

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

【问题讨论】：

使用世博小吃做得很好，现在我将从平面列表中删除 firstItem 并在平面列表之前的视图中使用它，然后你可以在它旁边写

标签： android react-native gridview react-native-flatlist

【解决方案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' });

【讨论】：