Css React Native:ZIndex与动态视图

我对React Native很陌生，我尝试构建一个应用程序，在其中我向我的用户展示平铺概述。我用一个包含3列的平面列表构建了这个平铺概览。我需要让它看起来像所有的项目都挂在一根绳子上，绳子在我拥有的瓷砖后面垂直延伸，我试图通过将我的“项目”视图的Z索引设置为1000，将我的“绳子”视图的zIndex设置为1来实现这一点。请参见下面的示例：

我手机的代码如下所示：

export default class ItemButton extends Component {

  //

render() {
    const { item, style, onPress } = this.props
    console.log('style for itemButton: ', style)
    return (
        <TouchableOpacity style={style} onPress={onPress}>
            <Image style={{zIndex:1000, width: style.width, height: style.height}} resizeMode={'contain'} source={require('../Artwork/Items/cta-enter.png')}></Image>
            <Image style={{top: -Math.abs(style.height + 100), height: 200, width: 30, zIndex:1, alignSelf: 'center'}} source={require('../Artwork/Items/rope.png')} resizeMode={'contain'}></Image>
        </TouchableOpacity>        
    );
  }
}

导出默认类ItemButton扩展组件{
//
render（）{
const{item，style，onPress}=this.props
console.log（'itemButton的样式：'，样式）
返回(
);
}
}

我在我的平面列表中实现它，如下所示：

renderCollectionItem(item) {
    return <ItemButton item={item} style={styles.buttonStyle} onPress={() => this.collectionItemPressed(item)} />
  }

render() {
return (
   <FlatList
  style={{width: collectionViewWidth, flexDirection: 'row', overflow: 'visible', top: this.props.style.top}}
  contentContainerStyle={[{left: this.props.horizontalSpacing / 2}, internalStyles.collectionViewContentStyle]}
  data = { this.convertToIndexed(this.props.items) }
  renderItem = {({item}) => (
    this.renderCollectionItem(item[0])
  )}
  numColumns={(3)}
  key={(Helpers.isPortrait() ? this.state.portraitRowSize : this.state.landscapeRowSize)}
  keyExtractor={(item, index) => index.toString()}
/>
);
}

renderCollectionItem（项目）{
返回此。collectionItemPressed（项目）}/>
}
render（）{
返回(
(
此.renderCollectionItem（项[0]）
)}
numColumns={（3）}
key={（Helpers.isPortrait（）？this.state.肖像行大小：this.state.landscapeRowSize）}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}

但是，这不起作用，因为React Native始终放置稍后以更高的Z索引渲染的视图

问题：

---

我应该如何配置平面列表以获得上图所示的所需结果？

不幸的是，react native不支持z索引。。 我在使用动态组件时也遇到了同样的问题， 解决方案是在两个元素的样式中都使用立面属性，这里有一个技巧：

• 将要位于顶部更高标高的图元设置为15
• 将另一个图元设置为另一个图元的底部，例如5。 结果正是你想要的

  ---

不幸的是，react native不支持z索引。。 我在使用动态组件时也遇到了同样的问题， 解决方案是在两个元素的样式中都使用立面属性，这里有一个技巧：

• 将要位于顶部更高标高的图元设置为15
• 将另一个图元设置为另一个图元的底部，例如5。 结果正是你想要的

  ---

可以显示一些代码，以便我们可以更仔细地查看您的实现吗？@HaiderAli我刚刚用我单元格中的代码更新了我的问题，我在这里添加了代码。我已经检查了您的实现，它看起来很好，我想您需要检查您是如何在平面列表上实现的。ps给zIndex:1和-1也会在你的案例中起作用嗨！谢谢你的努力。您的代码示例之所以有效，是因为渲染的顺序不同。在我的平面列表中，我依次渲染所有元素，这会自动为它们提供更高的Z索引。这就是我试图回答这个问题的问题，不仅仅是常规的Z索引配置，你还可以展示你的平面列表实现吗？可以展示一些代码，以便我们可以更仔细地了解你的实现吗？@HaiderAli我刚刚用我手机中的代码更新了我的问题，这就是我添加Rope的地方。我已经检查了你的实现，它看起来很好，我想你需要检查一下你是如何在FlatList上实现它的。ps给zIndex:1和-1也会在你的案例中起作用嗨！谢谢你的努力。您的代码示例之所以有效，是因为渲染的顺序不同。在我的平面列表中，我依次渲染所有元素，这会自动为它们提供更高的Z索引。这就是我试图回答这个问题的问题，不仅仅是常规的Z索引配置，您还可以展示您的平面列表实现吗？