maomaomao001
V2EX  ›  问与答

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

  •  
  •   maomaomao001 · Dec 11, 2016 · 5448 views
    This topic created in 3525 days ago, the information mentioned may be changed or developed.

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

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

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

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

    有没有办法想 html 那样

    table

    tr

    td

    ?

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

    cell 的宽度 等于这个 view 的宽度 /你希望一行单元格数量
    uugklp
        6
    uugklp  
       Dec 11, 2016   ❤️ 1
    父 View 设置 flexDirection:'row', 里边放两个子 View 设置 flex:1
    maomaomao001
        7
    maomaomao001  
    OP
       Dec 11, 2016 via Android
    这些大家
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   1303 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 30ms · UTC 17:18 · PVG 01:18 · LAX 10:18 · JFK 13:18
    ♥ Do have faith in what you're doing.