React Native FlatList 列之间的分隔符

2024-03-21

我有一个包含多列的 FlatList:

    <FlatList
      numColumns={4}
      ItemSeparatorComponent={this.renderSeparator}
      ...
    </FlatList>

和一个行分隔符:

  renderSeparator = () => (
    <View
      style={{
        backgroundColor: 'red',
        height: 0.5,
      }}
    />
  );

但分隔符只出现在行之间,而不出现在列之间(即使我添加width: 0.5

观展 https://snack.expo.io/r171a0PwZ


您可以在 renderItems 中添加 if else 条件并检查索引模数以添加分隔符。我只使用这个,一切都很好。

就像是 :-

_renderItem = ({item,index}) => {
   return(
      <View style={[{ backgroundColor: 'red', flex: 1 }, index%2==0 ? { marginRight: 10 } : { marginLeft: 10 } ]}>
         <Text>{item.key}</Text>
      </View>
   )
}

希望对你有帮助。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

React Native FlatList 列之间的分隔符 的相关文章

随机推荐

  • 获取文件的扩展名而不在路径中提供扩展名

    当您指定除扩展名之外的整个路径时 是否可以获得文件的扩展名 例如 C Users Administrator Pictures BlueHillsTest Thanks Directory GetFiles http msdn micros
  • Selenium 2 和 JUnit4:如何捕获异常屏幕截图?

    我只想在意外异常时捕获屏幕截图 Note This answer could be outdated The answer is based on Selenium 2 15 Using 测试观察者 http kentbeck github
  • 正则表达式匹配所有字母数字和某些特殊字符?

    我正在尝试让正则表达式工作 该正则表达式将允许所有字母数字字符 大写字母和非大写字母以及数字 但也允许空格 正斜杠 破折号 并加上 我已经开始了 但到目前为止还没有成功 如果你想允许only那些 你还需要使用锚点 and a zA Z0 9
  • 了解libuv/epoll/非阻塞网络IO

    我试图了解非阻塞网络 IO 是如何工作的Node js libuv 我已经发现了fileIO 是使用完成的libuv工作线程 因此 在后台线程中 不过很多地方都说networkIO 是使用系统调用以非阻塞方式完成的 例如epoll kque
  • 使用 Delphi 通过 LDAP 进行 Active Directory 身份验证,并使用 [email protected]

    正如您从下面的代码片段中看到的 我目前正在使用 adshlp 和 ActiveDs TLB 从当前登录的用户收集有关 AD 的信息 我有一个表格 允许用户输入他们的 AD 密码 并在允许访问系统之前验证其是否正确 这很好 我现在遇到的问题是
  • 相当于 WinRT 中的可编辑组合框?

    标准 桌面 Windows 组合框具有三种样式 简单 下拉和下拉列表 下拉菜单的工作方式类似于编辑控件和组合框 而下拉列表不允许编辑 我是否遗漏了某些内容 或者 Windows 8 商店应用程序中的 XAML ComboBox 控件仅支持下
  • Cypress 通过 console.log 和命令日志来输出

    是否可以重定向或捕获赛普拉斯浏览器日志和命令日志以输出 我读了一些 Cypress githubissues https github com cypress io cypress issues 448关于这个话题 但我不知道如何让它发挥作
  • 替换宏变量中的字符串?

    我有一个宏 我在其中传递一个参数并使用它根据输入的名称定义一个新变量 define DO X x char do x var x other things 问题是如果我传入一个结构变量 它就会崩溃 DO X some struct gt t
  • 如何从 cdn THREE.js 加载 GLTFLoader

    我在弄清楚如何让 GLTFLoader 在 THREE js 中工作时遇到一些问题 我不明白如何使用 CDN 站点来托管文件 我尝试过使用网络上示例的链接 但这并没有完成我的工作 我在另一篇文章中读到 GLTFLoader 文件必须与我正在
  • 如何在与 Castle Windsor DI 容器相同的上下文中重用瞬态依赖项

    如果我有以下设置 当在同一上下文中创建对象时 如何将容器配置为使用相同的数据库 public class Database public interface IRepository Database Database get public
  • C/Unix 的参数解析助手

    我知道以下情况 尊者getopt 3 扩展的getopt long glibc s argp http www gnu org software libtool manual libc Argp htmlUnix 风格参数向量的解析器 po
  • 在类路径中包含 jar 文件

    我正在从引用一些外部 jar 文件的批处理文件运行 java 程序 我如何在我的批处理文件中包含这些 jar 文件 请帮助 看看Sun的官方文档 设置类路径 http download oracle com javase 6 docs te
  • 确定表/数据库的字符集?

    可以运行什么 T SQL 命令来查找 SQL Server 中表或数据库的字符集 编辑 服务器版本 Microsoft SQL Server 2008 R2 RTM 10 50 1600 1 X64 您可以使用检查版本 SELECT VER
  • 如何获取span标签的值

    如何获取 span 标签的值并将其发送到我的表单中到另一个页面 span span 我需要将我的跨度标记小计的内容发送到另一个页面 我想将其保存到隐藏字段中 但我发现没有办法做到这一点 我用了这个 但没有成功 function getTot
  • 如何在 OpenglES 1.x 中实现阴影(在 iPhone 上)

    如何在我的 OpenglES 1 x 场景中实现阴影 我用谷歌搜索了几个小时 找不到任何有用的东西 我可以找到这个教程 http www paulsprojects net tutorials smt smt html 但没有成功将其移植到
  • 升级到 SDK 2.3.301 后,Service Fabric Actor 或服务随机变得无法访问

    从 Service Fabric SDK 2 0 135 升级到 2 3 301 后 我们开始遇到 Service Fabric actor 或服务无法访问的情况 尽管在 Service Fabric Explorer 中显示为正常运行 一
  • 无法获取 WorksheetFunction 类的 Match 属性

    我想做的是基于 CelloSht Input Cells Rows 7 我想在另一个Sheet的 periodSheet A列中找到匹配项 并根据给定的列获取相应的值 我尝试过结合使用 Index and Match去做这个 这 Index
  • 使用 .NET MVC 控制器操作作为 HTML 的源

    我正在尝试显示与数据库中的用户关联的图片 图片字段的数据类型是image 在页面上 不幸的是下面的代码无法做到这一点 HTML img src User Picture 1 控制器动作 public byte Picture int id
  • 字典理解中的操作顺序

    我遇到了以下有趣的构造 假设您有一个列表列表 如下所示 my list captain1 foo1 bar1 foobar1 captain2 foo2 bar2 foobar2 你想用它们创建一个字典0 index 元素是键 一个方便的方
  • React Native FlatList 列之间的分隔符

    我有一个包含多列的 FlatList