在我的React原生项目中，我尝试使用Flatlist或有时使用map方法来创建某种列表，以执行JSX Element。我得到了正确的结果，但单独使用时出现了一点问题。
让我们以聊天应用为例，当我们打开WhatsApp时，会显示很多人，但每个项目后面还有一个小分隔符，看起来很棒，现在，当我尝试使用Flatlist中的ItemSeparatorComponent属性将该分隔符放入React Native应用时，它可以工作，但在某些地方仍然有效，这意味着在某些项目中，分隔符没有显示，看起来缺少分隔符，它感觉没有边框/分隔符。实际上是这样的，分隔符下面的项被隐藏起来了，或者高度看起来比其他项小，视图下面的项有点向上，所以分隔符被隐藏起来了，这是主要问题，为什么会发生这种情况，我尝试了所有方法，但仍然遇到了UI问题。
下面是代码示例：

<FlatList
  data={actionSheet._data}
  showsVerticalScrollIndicator={false}
  showsHorizontalScrollIndicator={false}
  keyExtractor={(_, index) => index}
  renderItem={({item, index}) => <ActionSheetClickableItem data={item} index={index}/> }
  ItemSeparatorComponent={() => (
    <View
      style={{
        height: 1,
        width: '100%',
        backgroundColor: 'red'
      }}
    />
  )}
/>

或

<ScrollView>
  {
    actionSheet._data.map((item, index) => (
      <>
       <ActionSheetClickableItem data={item} index={index} key={index}/>
       <View
         style={{
           height: 1,
           width: '100%',
           backgroundColor: 'red'
         }}
       />
      </>
    ))
  }
</ScrollView>

因此，根据上面的代码，我可以肯定，一切都是正确的，但为什么分隔符被隐藏，如果我们看这个picture在绿色矩形区域，没有边界显示，为什么...我想在这里显示它，我试图把zIndex属性，该技巧工作正常，但这不是解决方案，它必须正确的视图，因为我们期望，为什么会这样，有什么办法吗？