创建一个两行listView

时间:2017-11-03 09:58:59

标签: reactjs react-native

我想创建一个两行列表。这是我想要实现的结果

enter image description here

我尝试将flatList与此代码一起使用

union all

但我得到了他的结果

enter image description here

我还尝试使用此代码

将每个项目的宽度设置为屏幕宽度的一半
select a.id, a.name, ac.carer
from ((select ac.id, ac.appointment_id, ac.carer1 as carer
       from appointment_carers ac
      ) union all
      (select ac.id, ac.appointment_id, ac.carer2 as carer
       from appointment_carers ac
      ) union all
      (select ac.id, ac.appointment_id, ac.carer3 as carer
       from appointment_carers ac
      )
     ) ac join
     appointments a
     on ac.appointment_id = a.id;

但是当设备方向改变时它不起作用。

我想要实现的是创建一个具有屏幕宽度的虚拟表,并将文本放在每个单元格的开头。像这样的东西

SELECT Name, key, MAX(state) AS state
FROM <tablename>
WHERE key = 12
GROUP BY Name, key
ORDER BY state Desc;

你知道如何实现这个目标吗?

1 个答案:

答案 0 :(得分:0)

您只需将flex:1添加到renderItem道具内的父视图中即可。像这样

<FlatList
   style={{flex: 1}} //whatever style you had          
   numColumns={2}                                  
   data={[{key: 'row1'}, {key: 'row2'},{key: 'row3'},{key: 'row4'}]}
   renderItem={({item}) =>
       <View style = {{flex: 1}}>
           <Text>{item.key}</Text>
       </View>
   } 
/>