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

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()}
/>
);
}

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

问题: 我应该如何配置我的平面列表以获得上图所示的结果?