缩略图隐藏在位置:相对位置之后

Question

我有一个屏幕，其中使用了一个缩略图和一个UserInfoContainer，后者是一个PanGestureHandler（向上滚动的React原生动画元素）。我希望即使当我向上滚动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。