您可以使用FlatList组件的ItemSeparatorComponent属性来创建垂直间距。此属性是在每个FlatList项之间呈现的组件，但不是在顶部、底部、右侧或左侧呈现的组件。您可以在文档中阅读有关此属性的更多信息。
将FlatList更改为：

<FlatList
  numColumns={2}
  data={people}
  renderItem={renderItem}
  ItemSeparatorComponent={() => <View style={{height: 20}} />}
  /* that is not necessary anymore
columnWrapperStyle={{
    justifyContent: "space-between"
  }} */      
/>

为了使水平空间与垂直空间大小相同，可以使用padding将一列从另一列移开：

• 左边的项的paddingRight是垂直空间大小的一半。
• 右边的那些得到paddingLeft而不是paddingRight。

下面是代码：

const renderItem = ({ item, index }: Props) => (
  <View
    style={[
      {
        aspectRatio: 1,
        flexGrow: 1,
        width: "50%",
        position: "relative",
      },
      index % 2 === 0
      ? {
        paddingRight: 10,
      } : {
        paddingLeft: 10
      }
    ]}
  >
    <Pressable
      onPress={() => alert(item.name)}
    >

一些要点：

• 创建了View父组件，因为如果Pressable具有padding属性，则垂直间隙也将是可按的。
• 不要忘记设置width: '50%'，因为这会使图像占用屏幕宽度的一半。
• 两侧应接收相同的填充值，因为这对于差距居中非常重要。
• 您应该使用padding而不是margin，因为width仍然是50%，所以margin会将元素推到屏幕的右边缘之外。如果您使用更大的值，如40而不是10，margin而不是padding，您会发现问题。

This是视觉结果。
P.S.：我在我的机器上运行了你的应用程序，并使用了Unsplash上的一些URL图像，它工作正常：垂直间隙由ItemSeparatorComponent创建。
我对代码做了一些修改，现在水平和垂直的间隙大小相等。This是结果。另外，我修改了我的答案。

ItemSeparatorComponent负责between rows的空间，但不负责列之间的空间，因为我们有一个两列的FlatList，所以我们可以创建与ItemSeparatorComponent相同的两列之间的空间，方法是将其作为marginRight添加到所有具有odd index的元素中。

<FlatList
   numColumns={2}
   data={people}
   ItemSeparatorComponent={() => <View style={{height: 10}} />}
   renderItem={({index, item}) =>  (
        <Pressable onPress={() => alert(item.name)} style={{
             aspectRatio: 1,
             width: "49.5%",
             marginRight: index % 2 !== 0 ? 0 : 10,             
             position: "relative",
        }}>
            ...

         </Pressable>})
/>

关键部分是渲染函数中每个项目的父视图的marginRight: index % 2 !== 0 ? 0 : 10。

对我来说，简单的解决方案是在每个项目周围添加边距，在容器周围添加负边距。