反应本机甲板滑动器库

Question

enter image description here

我正在尝试更改下面显示的图像的布局 我想在顶部显示它们 我只想更改下面显示的图像的布局 我想在第一张卡片上方显示它们

export default function App({navigation}) {
  const [index, setIndex] = React.useState(0);
  const onSwiped = () => {
    transitionRef.current.animateNextTransition();
    setIndex((index + 1) % data.length);
  };

  return (
    <SafeAreaView style={styles.container}>
      <View
        style={{
          backgroundColor: 'black',
          opacity: 0.05,
          transform: [{rotate: '45deg'}, {scale: 1.6}],
          position: 'absolute',
          left: -15,
          top: 30,
        }}></View>
      <View style={styles.swiperContainer}>
        <Swiper
          ref={swiperRef}
          cards={data}
          cardIndex={index}
          renderCard={card => <Card card={card} />}
          infinite
          backgroundColor={'transparent'}
          onSwiped={onSwiped}
          onTapCard={() => swiperRef.current.swipeLeft()}
          cardVerticalMargin={50}
          stackSize={stackSize}
          animateCardOpacity={true}
          stackScale={8}
          stackSize={3}
          verticalSwipe={false}
          stackSeparation={13}
          animateOverlayLabelsOpacity
          animateCardOpacity
          disableTopSwipe
          disableBottomSwipe
        />
      </View>
    </SafeAreaView>
  );
}

Answer 1

改变你的风格：top: 30 => top: -30

Answer 2

使用堆栈分离。 stackSeparation={-20}