React Native：具有动态视图的ZIndex

Question

我是React Native的新手，正在尝试构建一个应用程序，在该应用程序中向用户展示平铺的概述。我用3列的FlatList构造了这个平铺的概述。我需要使其看起来像所有物品都挂在垂直于我拥有的瓷砖后面的绳索上，并且我试图通过将“项目”视图的Z-Index设置为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>        
    );
  }
}

然后在我的FlatList中实现它，如下所示：

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-Index。

问题： 如上图所示，如何配置我的FlatList以获得所需的结果？

Answer 1

很不幸，react-native不支持z-index .. 我在使用动态组件时遇到了同样的问题， 解决方案是在两个元素的样式中都使用Elevation属性，这就是窍门：

• 给出您想位于最高海拔高度的元素，例如15。
• 将要成为其他元素的另一个元素放到另一个元素的底部。降低高度，例如5。 结果将正是您想要的。.