React Native - zIndex

Question

我尝试制作 FlatList 不同大小的圆圈，对于每个圆圈，我需要有自己的 zIndex。

圆圈中的数字，表示 zIndex 编号，如您所见，它不起作用。

我在 <TouchableWithoutFeedback>

上使用 zIndex

这是我的组件：

<TouchableWithoutFeedback
        onPress={() => dispatch(selectHockeyPlayer(item))}
        style={[
          styles.listItem,
          {
            width: playerWidth,
            height: playerWidth,
            transform: [{scale: scaleNum + 1.2}],
            zIndex: Math.floor(scaleNum + 2),
          },
          isRated ? styles.isRated : null,
          styles.circle,
          activePlayer(item, styles.selectedListItem),
        ]}>

Answer 1

Place a View inside of TouchableWithoutFeedback and apply TouchableWithoutFeedback styles to the View

Do this

<TouchableWithoutFeedback
        onPress={() => dispatch(selectHockeyPlayer(item))}>
        <View
          style={[
          styles.listItem,
          {
            width: playerWidth,
            height: playerWidth,
            transform: [{scale: scaleNum + 1.2}],
            zIndex: Math.floor(scaleNum + 2),
          },
          isRated ? styles.isRated : null,
          styles.circle,
          activePlayer(item, styles.selectedListItem),
        ]}>

Answer 2

好吧，我知道问题出在哪里了，FlatList 不适用于 z Index，所以我不得不使用 ScrollView.