嵌套的React Native Flatlist样式

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

const data = [
  {
    title: 'Group 1',
    items: ['Item 1-1', 'Item 1-2', 'Item 1-3'],
  },
  {
    title: 'Group 2',
    items: ['Item 2-1', 'Item 2-2'],
  },
  // ...更多分组
];

const renderItem = ({ item }) => (
  <View style={styles.group}>
    <Text style={styles.groupTitle}>{item.title}</Text>
    <FlatList
      data={item.items}
      keyExtractor={(item, index) => index.toString()}
      renderItem={({ item }) => <Text style={styles.item}>{item}</Text>}
      horizontal={true} // 可以设置为横向滚动
    />
  </View>
);

const NestedFlatListExample = () => (
  <FlatList
    data={data}
    keyExtractor={(item, index) => index.toString()}
    renderItem={renderItem}
    getItemLayout={(data, index) => ({
      length: 100, // 假设每个分组的固定高度为100
      offset: 100 * index,
      index,
    })}
  />
);

const styles = StyleSheet.create({
  group: {
    marginBottom: 10,
  },
  groupTitle: {
    fontSize: 18,
    fontWeight: 'bold',
    marginBottom: 5,
  },
  item: {
    fontSize: 16,
    marginRight: 10,
  },
});

export default NestedFlatListExample;