FlatList相邻列表项group属性不同时为后项应用条件样式的实现方法

直接在renderItem阶段通过索引对比相邻项的group值即可，不需要提前预处理数据。
首先修正你现有代码的两个不规范写法：

• renderItem回调解构出的索引字段是index，不是你写的i
• FlatList的key不要写在返回的子组件上，统一通过keyExtractor属性配置，这是官方标准写法，能避免异常重渲染。

判断逻辑：

• 列表第一项（索引为0）前面没有相邻元素，永远不需要加特殊样式
• 其余项取当前索引前一位的数组元素，对比两者的group属性，值不相等时给当前项传入特殊样式即可

完整实现代码：

<FlatList
  data={products}
  keyExtractor={item => String(item.code)}
  renderItem={({item, index}) => {
    const needSpecialStyle = index > 0 && products[index - 1].group !== item.group
    return <SingleItem product={item} needSpecialStyle={needSpecialStyle} />
  }}
/>

在SingleItem组件内根据传入的标识拼接样式，示例：

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

const SingleItem = ({ product, needSpecialStyle }) => {
  return (
    <View style={[
      styles.baseItem,
      needSpecialStyle && styles.specialStyle
    ]}>
      <Text>{product.description}</Text>
    </View>
  )
}

const styles = StyleSheet.create({
  baseItem: {
    paddingHorizontal: 16,
    paddingVertical: 12
  },
  specialStyle: {
    // 替换为你需要的特殊样式，比如上边框、额外上边距、分组背景标识等
    borderTopWidth: 1,
    borderTopColor: '#e5e5e5',
    marginTop: 8,
    paddingTop: 20
  }
})

该逻辑会自动适配列表后续的排序、过滤、增删操作，只要data数组更新，判断结果会和新的列表顺序完全匹配，没有额外性能损耗。

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