我有一个SectionList，分为3个部分：
1.一般用户信息
1.用户车辆信息
1.其他选项
一般信息项需要TouchableOpacity组件，以便当用户单击它们时，它们会路由到更新页面以更新此数据。
车辆信息项只是文本组件，但我确实需要一个“添加车辆”按钮组件在本节结束时，无论有多少车辆已被添加。
Other Options部分都可以是重定向到应用程序内的不同页面的TouchableOpacity组件。
如何在SectionList的不同部分中呈现不同的组件，并将某些组件添加到某些部分而不是其他部分？

这就是我需要的

SectionList组件

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

const SECTIONS = [
  {
    title: 'General',
    data: [
      {
        key: '1',
        content: 'John Smith',
        desc: 'Full Name',
      },
      {
        key: '2',
        content: 'john.smith@gmail.com',
        desc: 'E-mail',
      },
      {
        key: '3',
        content: '(222)123-4567',
        desc: 'Phone Number'
      },
    ],
  },
  {
    title: 'Vehicles',
    data: [
      {
        key: '4',
        content: 'Honda Civic',
        desc: 'Black'
      },
      {
        key: '5',
        content: 'Jeep Wrangler',
        desc: 'White'
      },
    ],
  },
  {
    title: 'Other',
    data: [
      {
        key: '6',
        content: 'Support',
        desc: ''
      },
      {
        key: '7',
        content: 'Terms of Service',
        desc: ''
      },
      {
        key: '8',
        content: 'Deactivate Account',
        desc: ''
      },
    ],
  },
];

export default function Profile() {

  return (
    <SafeAreaView style={styles.container}>
    <SectionList
      stickySectionHeadersEnabled={false}
      sections={SECTIONS}
      // keyExtractor={(item, index) =>  item + index }
      renderSectionHeader={({section }) => (
          <Text style={styles.header}>{section.title}</Text>
      )}
      renderItem={({ item, index, section }) => (
        <View style={[
          styles.item,
          index === 0 && styles.itemFirst,
          index === section.data.length -1 && styles.itemLast
          ]}>
          <Text style={styles.title}>{item.content}</Text>
          <Text style={styles.description}>{item.desc}</Text>
        </View>
      )}
      
    />
  </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    marginHorizontal: 16,
  },
  item: {
    backgroundColor: '#fff',
    borderBottomColor: '#aaa',
    borderBottomWidth: 0.2,
    paddingVertical: 8,
    paddingHorizontal: 20,
    marginHorizontal: 10,
  },
  itemFirst: {
    borderTopLeftRadius: 8,
    borderTopRightRadius: 8
  },
  itemLast: {
    borderBottomLeftRadius: 8,
    borderBottomRightRadius: 8,
    borderBottomWidth: 0
  },
  header: {
    fontSize: 14,
    marginTop: 20,
    marginBottom: 10,
    marginHorizontal: 10,
    fontWeight: '400',
    color: '#333333',
    lineHeight: 24,
  },
  title: {
    fontWeight: '400',
    fontSize: 17,
    lineHeight: 22,
    color: '#000000',
    marginBottom: 1.85
  },
  description: {
    fontWeight: '400',
    fontSize: 12,
    lineHeight: 16,
    color: 'grey'
  },
  lineStyle:{
    borderWidth: 0.3,
    width: "100%",
    borderColor:'grey',
    marginTop: 7,
},
});