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反转，并对倒排的列的弯曲方向使用一种样式，以便它实际上也可以滚动到顶部。请注意，这也会有效地以相反的顺序显示帖子，因此需要翻转基础数组才能获得所需的结果

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'
  }
});