Flatlist绝对定位行

Question

我试图基本上创建一个行的“堆栈”，而不是通过垂直或水平滚动项目，它将所有组件呈现在彼此之上

我的解决方案是使用绝对定位，并将每个组件堆叠在另一个上面

唯一的问题是，绝对定位似乎不适用于FlatList。这是我到目前为止所尝试的，只要你使用绝对定位的任何东西，它就会呈现出什么似乎没什么。

<FlatList
  data={[
    {key: 'a', color: 'red'},
    {key: 'b', color: 'green'}
  ]}
  renderItem={({item, index}) => (
  <View style={{backgroundColor: item.color,
   position: 'absolute', top: 0, left: 0
  }}>
  <Text>{item.key}</Text>
  </View>
    )}
/>

Answer 1

这可能更接近你想要的：

<FlatList
            style={{height:50, position: 'absolute', width: '100%'}}
            data={[
              {key: 'a', color: 'red'},
              {key: 'b', color: 'green'}
            ]}
            renderItem={({item, index}) => (
            <View style={{backgroundColor: item.color,
                height: 50,
                alignItems: 'center',
                justifyContent: 'center'
            }}>
            <Text style={{height: 50}}>{item.key}</Text>
            </View>
              )}
          />