React-Native：在 FlatList 中反转 zIndex

Question

我有一个 FlatList，其中包含一些顶部元素应该与底部元素重叠的元素。为此，我想反转 zIndex，但 FlatList 不断覆盖我的 zIndex。

在下面的代码中，我尝试使用 zIndex: 0 - index 反转 zIndex，但它不起作用

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={[styles.item, { zIndex: 0 - index, }]} />;
  }
  render() {
    return <FlatList data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost} />;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  },
});

link to Expo Snack

Answer 1

我没有在 zIndex 的帮助下做到这一点，因为问题似乎是从索引中设置 zIndex，它似乎不起作用。

我设法做到这一点的方法是反转 FlatList，并使用一种用于反转列 flex 方向的样式，以便它实际上也滚动到顶部。请注意，这实际上也会以相反的顺序显示帖子，因此需要翻转底层数组以实现所需的结果

import React, { Component } from "react";
import { FlatList, Text, View, StyleSheet } from "react-native";

export default class App extends React.Component {
  _renderPost({ index }) {
    return <View style={styles.item} />;
  }
  render() {
    return <FlatList style={styles.container} inverted data={[1, 2, 3, 4, 5,]} renderItem={this._renderPost}/>;
  }
}

const styles = StyleSheet.create({
  item: { 
    height: 200, 
    borderWidth:2, 
    borderBottomLeftRadius:50, 
    borderBottomRightRadius:50, 
    marginBottom: -50, 
    backgroundColor:"white",
  },
  container: {
    flexDirection: 'column-reverse'
  }
});