V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
maomaomao001
V2EX  ›  问与答

[react native] 请问 react native 如何做出表格布局?

  •  
  •   maomaomao001 · 2016-12-11 17:58:57 +08:00 · 4992 次点击
    这是一个创建于 2929 天前的主题,其中的信息可能已经有所发展或是发生改变。

    [react native] 请问 react native 如何做出表格布局?

    flex 布局用的好好的,突然需要一个需求,体格小型组件需要表格布局,请问 如何实现?

    搜索过了,似乎都推荐用 list view

    可是我的需求也就 4 格的两行 table... 感觉用 listview 很浪费

    有没有办法想 html 那样

    table

    tr

    td

    ?

    7 条回复    2016-12-11 20:21:34 +08:00
    aussieweever
        1
    aussieweever  
       2016-12-11 18:06:56 +08:00 via Android   ❤️ 1
    有几个 grid 的开源控件可以试试
    Mikewu
        2
    Mikewu  
       2016-12-11 18:09:20 +08:00 via iPhone   ❤️ 1
    既然只有 4*2 ,就 view*4 吧,表格需求多的话,自己写个 Component 吧
    maomaomao001
        3
    maomaomao001  
    OP
       2016-12-11 18:34:39 +08:00 via Android
    @Mikewu 关键是自己写这样的 4 个 view ,似乎没法办证行 宽度相同,行又能对齐
    Mikewu
        4
    Mikewu  
       2016-12-11 18:48:16 +08:00   ❤️ 1
    @maomaomao001 view 内部使用 flexDirection: 'row' ,flex: x 布局,使用同一 view 或者控制相应比例就可以达到行宽度相同、行对齐了。
    myoula
        5
    myoula  
       2016-12-11 19:44:30 +08:00   ❤️ 1
    flexDirection:'row',
    alignItems: 'center',
    justifyContent: 'flex-start',
    flexWrap:'wrap'

    cell 的宽度 等于这个 view 的宽度 /你希望一行单元格数量
    uugklp
        6
    uugklp  
       2016-12-11 20:16:55 +08:00   ❤️ 1
    父 View 设置 flexDirection:'row', 里边放两个子 View 设置 flex:1
    maomaomao001
        7
    maomaomao001  
    OP
       2016-12-11 20:21:34 +08:00 via Android
    这些大家
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   3155 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 12:53 · PVG 20:53 · LAX 04:53 · JFK 07:53
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.