使用ListView在部分内渲染行？

Question

使用react-native中的ListView组件，是否可以在这样的部分中呈现行？

<section>
  <row>A</row>
  <row>B</row>
</section>
<section>
  <row>C</row>
  <row>D</row>
</section>

不这样：

<section></section>
<row>A</row>
<row>B</row>
<section></section>
<row>C</row>
<row>D</row>

我使用renderRow和renderSectionHeader。

我想要像这样呈现的原因是由于样式。但也许我需要两个嵌套ListView代替？

Answer 1

我可以提出一点hacky解决方案。

在android上添加阴影到secton，你可以将elevation设置为所有行和节标题。在ios上，您需要设置shadow*个样式。

但如果您决定添加borderRadius，则会遇到问题。在这种情况下，为了防止顶部边框工件，您可以向每一行添加小的负marginBottom（-2或-4应该足够）。

shadow: {
  shadowOffset: {
    width: 2,
    height: 2
  },
  shadowRadius: 1,
  shadowOpacity: 0.2,
  elevation: 2,
  borderRadius: 2,
  marginBottom: -2,
}

包含3行的ListView：