React Native Array to Section List

const data = [
  {
    title: 'Group 1',
    data: ['Item 1', 'Item 2']
  },
  {
    title: 'Group 2',
    data: ['Item 3', 'Item 4']
  }
];

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

const data = [
  {
    title: 'Group 1',
    data: ['Item 1', 'Item 2']
  },
  {
    title: 'Group 2',
    data: ['Item 3', 'Item 4']
  }
];

const renderItem = ({ item }) => (
  <View>
    <Text>{item}</Text>
  </View>
);

const renderSectionHeader = ({ section }) => (
  <View>
    <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>
  </View>
);

const App = () => {
  return (
    <SectionList
      sections={data}
      renderItem={renderItem}
      renderSectionHeader={renderSectionHeader}
    />
  );
};

export default App;

const data = [
  {
    title: 'Group 1',
    data: ['Item 1', 'Item 2']
  },
  {
    title: 'Group 2',
    data: ['Item 3', 'Item 4']
  }
];

const renderItem = ({ item }) => (
  <View>
    <Text>{item}</Text>
  </View>
);

const renderSectionHeader = ({ section }) => (
  <View>
    <Text style={{ fontWeight: 'bold' }}>{section.title}</Text>
  </View>
);

<SectionList
  sections={data}
  renderItem={renderItem}
  renderSectionHeader={renderSectionHeader}
  getItemLayout={(data, index) => ({
    length: 44, // 假设每个 item 的高度为 44
    offset: 44 * index,
    index
  })}
  removeClippedSubviews={true}
/>