是否存在内置React Native组件可实现类似iOS原生的列表效果？

你图中展示的是iOS系统标准的inset grouped分组列表样式，React Native有内置组件可以直接实现该效果，不需要引入第三方依赖。

可用内置组件 #

React Native内置的SectionList组件可以完美适配该样式，针对单组无分组的场景也可以使用FlatList组件实现，核心配置如下：

• 给列表设置contentInsetAdjustmentBehavior="automatic"属性，自动适配iOS系统的安全区边距
• 列表项根据所在分组的位置设置圆角：分组第一个元素仅设置左上、右上角圆角，分组最后一个元素仅设置左下、右下角圆角，中间元素无圆角，侧边统一留对应边距即可对齐原生样式
• 不需要分组头部吸顶效果的话，给SectionList设置stickySectionHeadersEnabled={false}即可，和原生列表表现完全一致

简易示例代码 #

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

const DemoList = () => {
  const sections = [
    {
      title: "通用",
      data: ["关于本机", "软件更新", "隔空投送"]
    },
    {
      title: "隐私",
      data: ["定位服务", "通讯录权限", "照片权限"]
    }
  ];

  const renderItem = ({item, index, section}) => {
    const isFirst = index === 0;
    const isLast = index === section.data.length - 1;
    return (
      <View style={[
        styles.item,
        isFirst && styles.firstItem,
        isLast && styles.lastItem
      ]}>
        <Text>{item}</Text>
      </View>
    )
  }

  return (
    <SectionList
      sections={sections}
      renderItem={renderItem}
      renderSectionHeader={({section}) => <Text style={styles.header}>{section.title}</Text>}
      contentInsetAdjustmentBehavior="automatic"
      stickySectionHeadersEnabled={false}
      style={styles.list}
    />
  )
}

const styles = StyleSheet.create({
  list: {
    paddingHorizontal: 16,
    backgroundColor: '#f2f2f7'
  },
  header: {
    fontSize: 13,
    color: '#6d6d72',
    marginVertical: 8,
    paddingLeft: 12
  },
  item: {
    padding: 16,
    backgroundColor: '#ffffff',
    marginHorizontal: 4
  },
  firstItem: {
    borderTopLeftRadius: 10,
    borderTopRightRadius: 10
  },
  lastItem: {
    borderBottomLeftRadius: 10,
    borderBottomRightRadius: 10
  }
})

内容的提问来源于stack exchange，提问作者river737