使用 ListView 在部分内渲染行？答案

【问题标题】：Render rows within sections using ListView?使用 ListView 在部分内渲染行？
【发布时间】：2016-11-22 11:49:25
【问题描述】：

使用 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 来代替？

【问题讨论】：

你需要什么样式？
@farwayer 每个
都应该像一张带阴影的卡片。不幸的是，使用页眉、页脚和分隔符无法实现特定的外观。

标签： react-native react-native-listview

【解决方案1】：

我可以提出一个有点老套的解决方案。

在 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 行列表视图：

【讨论】：