2

在我的 React Native 项目中，我尝试使用 Flatlist 或有时使用 map 方法制作某种列表，以执行 JSX Element。我得到了正确的结果，但是单独存在一些问题。

让我们以聊天应用程序为例，当我们打开 WhatsApp 时，出现了很多人，但每个项目之后还有一个小分隔符，看起来很棒，现在正是我尝试使用 ItemSeparatorComponent 将该分隔符放入我的 React Native 应用程序时Flatlist 中的属性，它正在工作但仍在某些地方，这意味着在某些项目中没有显示分隔符，它看起来不见了，感觉没有边框/分隔符。实际上发生的事情是，该分隔符的下方项目是隐藏的或高度看起来比其他项目小，View下方的项目有点向上，所以分隔符隐藏了，这是主要问题，为什么发生这种情况，我尝试了一切，但仍然遇到 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>

所以根据上面的代码，我肯定知道，一切都是正确的，但是为什么那个分隔符被隐藏了，如果我们在绿色矩形区域看这张图片，没有边框出现，为什么......我想在这里展示它，我试图放置 zIndex 属性，该技巧可以正常工作，但这不是解决方案，它必须按照我们的预期纠正视图，为什么它的行为如此，任何解决方案??????

4

1 回答 1

0

使用以下样式作为分隔线

style={{
  width: '100%',
  borderBottomWidth: 1,
  borderColor: 'red,
}}
于 2022-01-31T20:28:54.890 回答