React Native FlatList 中的重叠项答案

【问题标题】：Overlapping items in React Native FlatListReact Native FlatList 中的重叠项
【发布时间】：2019-12-02 09:11:46
【问题描述】：

我正在尝试使FlatList 中的项目列表像一堆卡片一样相互重叠，但是使用负边距，项目会被切断，使用“left：-20”也可以。

图片组件比较简单，带有圆形边框：


export default class ProfilePicture extends React.Component {
  render () {
    let size = this.props.size || 50

    return (
      <Image
        source={{ uri: this.props.picture }}
        style={{
          backgroundColor: 'rgba(12, 94, 20, 0.5);',
          width: size,
          height: size,
          borderRadius: size / 2
        }}
      />
    )
  }
}

在列表中是我尝试完成重叠的地方：

export default class RidersListCompact extends Component {
  state = {
    users: []
  }

  ...

  renderItem = ({ item: user, index }) => {
    return <View style={styles.itemContainer}>
      <ProfilePicture
        picture={user.picture}
        size={Layout.window.hp(6)}
      />
    </View>
  }

  render () {
    return (
      <FlatList
        renderItem={this.renderItem}
        data={this.state.users}
        keyExtractor={(user) => 'user_' + user.id}
        horizontal
        inverted
        style={{ ...styles.container, ...this.props.style }}

      />
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row-reverse'
  },
  itemContainer: {
    marginRight: -Layout.window.hp(2),
    width: Layout.window.hp(6),
    height: Layout.window.hp(6),
    backgroundColor: 'rgba(0,0,0,0);'
  }
})

我尝试在每个项目上设置不同的zIndex，但运气不佳，有没有办法在 FlatList 中重叠图像/组件？

干杯！

【问题讨论】：

看到这个答案stackoverflow.com/questions/47545355/…
@Vivek：我之前已经通读过，但我无法让它在 FlatList 中工作。在没有问题的视图中。
我认为您的图片包含白色背景

标签： react-native react-native-flatlist

【解决方案1】：

使用Flex。通过将然后放入 flex 直接行明智地分开项目。使用来自 flex 的道具。 Flex 有以下可用的道具

alignContent
alignItems
alignSelf
aspectRatio
borderBottomWidth
borderEndWidth
borderLeftWidth
borderRightWidth
borderStartWidth
borderTopWidth
borderWidth
bottom
direction
display
end
flex
flexBasis
flexDirection
flexGrow
flexShrink
flexWrap
height
justifyContent
left
margin
marginBottom
marginEnd
marginHorizontal
marginLeft
marginRight
marginStart
marginTop
marginVertical
maxHeight
maxWidth
minHeight
minWidth
overflow
padding
paddingBottom
paddingEnd
paddingHorizontal
paddingLeft
paddingRight
paddingStart
paddingTop
paddingVertical
position
right
start
top
width
zIndex

【讨论】：

谢谢，我现在已经使用 flexbox 完成了这项工作，但我不知道如何使它与 FlatList 一起工作，我希望在有更多项目时保持它有用比我可以在屏幕上水平放置的内容。我知道我可以使用 ScrollView 解决它，但我觉得必须有更好的方法？
stackoverflow.com/questions/63464294/…你能看看这里吗？

【解决方案2】：

如果您想重叠图像，您应该在样式中使用位置样式。您需要将位置设置为绝对值并设置左、右、上、下值。 More information

【讨论】：