在React Native中跨多列动态对齐从API解析的文本项的单元格高度

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

const data = [
  { id: 1, text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
  { id: 2, text: 'Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.' },
  { id: 3, text: 'Nullam nec nisi sed odio tincidunt maximus.' },
  // 更多文本项...
];

const renderItem = ({ item }) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', padding: 10 }}>
      <Text onLayout={(event) => {
        const { height } = event.nativeEvent.layout;
        // 根据文本内容的高度设置单元格的高度
        // 可以根据具体需求进行调整
        // 例如：设置最小高度为50
        const cellHeight = Math.max(height, 50);
        // 设置单元格的高度
        // 可以根据具体需求进行调整
        item.height = cellHeight;
      }}>{item.text}</Text>
    </View>
  );
};

const App = () => {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id.toString()}
      renderItem={renderItem}
      numColumns={2} // 设置列数为2
    />
  );
};

export default App;