缩略图隐藏在 position:relative 之后

Question

我有一个屏幕，我正在使用Thumbnail 和UserInfoContainer，这是一个 PanGestureHandler（反应向上滚动的原生动画元素）。我希望即使向上滚动我的UserInfoContainer 容器，缩略图也应该保持在它顶部的相同位置。

export const Screen: React.FunctionComponent = () => {

  return (
    <SafeAreaView style={styles.safeAreaViewContainer}>
      <View style={styles.container}>
        <View style={styles.iconsContainer}>
        <TouchableOpacity
          style={styles.cross}>
          <Thumbnail
            source={{
              uri:
                'https://cdn0.iconfinder.com/data/icons/very-basic-android-l-lollipop-icon-pack/24/close-512.png',
            }}
          />
        </TouchableOpacity>
        <HamburgerIcon style={styles.hamburgerIcon}/>
        </View>
        <View style={styles.infoContainer}>
          <UserInfoContainer />
        </View>
      </View>
    </SafeAreaView>
  );
};

export const styles = StyleSheet.create({
  safeAreaViewContainer: {
    flex: 1,
  },
  container: {
    backgroundColor: '#323443',
    flex: 1,
  },
  iconsContainer:{
    flexDirection: 'row'
  },
  cross: {
    paddingTop: moderateScale(30),
    paddingLeft: moderateScale(20),
    zIndex: 100,
  },
  infoContainer: {
    flex: 1,
  },

});

我添加了一个 zIndex，但现在当我添加 position: 'absolute' 时，我的缩略图就消失了。这已与另一个 FontAwesomeIcon 一起使用，但在我的缩略图的情况下它在这里不起作用。我该如何解决这个问题？

Answer 1

编辑：使用position: 'absolute' 时，您需要使用'top'、'bottom'、'right'和'left'样式定位元素。

此外，它不再是相对的，因此您可以将代码块向下移动到其他元素下方，这意味着它将始终呈现在顶部，不需要 zIndex。