如何在react-native中通过迭代数组来创建2列flexbox

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

const data = [
  { id: 1, text: 'Item 1' },
  { id: 2, text: 'Item 2' },
  { id: 3, text: 'Item 3' },
  // 添加更多的数据项...
];

const renderDataItem = (item) => {
  return (
    <View key={item.id} style={styles.item}>
      {/* 在这里放置每个数据项的内容 */}
    </View>
  );
};

const splitDataIntoColumns = (data) => {
  const midIndex = Math.ceil(data.length / 2);
  const leftColumnData = data.slice(0, midIndex);
  const rightColumnData = data.slice(midIndex);
  return [leftColumnData, rightColumnData];
};

const TwoColumnLayout = () => {
  const [leftColumnData, rightColumnData] = splitDataIntoColumns(data);

  return (
    <View style={styles.container}>
      <View style={styles.column}>
        {leftColumnData.map(renderDataItem)}
      </View>
      <View style={styles.column}>
        {rightColumnData.map(renderDataItem)}
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: 'row',
  },
  column: {
    flex: 1,
  },
  item: {
    // 定义每个数据项的样式
  },
});