Question

我正在尝试使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中重叠图像/组件？

干杯！

Answer 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

Answer 2

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

React Native FlatList中的重叠项

2 个答案: