如何在react原生的FlatList中呈现正方形视图列表？

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

const data = [
  { id: '1', color: 'red' },
  { id: '2', color: 'blue' },
  { id: '3', color: 'green' },
  // 添加更多项目...
];

const SquareItem = ({ color }) => (
  <View style={[styles.square, { backgroundColor: color }]} />
);

const App = () => (
  <FlatList
    data={data}
    keyExtractor={(item) => item.id}
    renderItem={({ item }) => <SquareItem color={item.color} />}
    numColumns={2}
    contentContainerStyle={styles.container}
  />
);

const styles = StyleSheet.create({
  container: {
    padding: 10,
  },
  square: {
    width: 100,
    height: 100,
    margin: 10,
  },
});

export default App;