react-native - 使用 ListView 在部分内渲染行？

Question

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

<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：