React Native Deck Swiper库如何调整图片布局至首张卡片上方

要实现将图片展示在首张卡片上方，仅需调整渲染顺序和层级即可，可根据你的实际需求选择以下两种方案：

方案1：图片仅在当前首张卡片内部展示 #

直接修改renderCard属性传入的<Card>组件内部结构，把图片组件放在卡片内容的最顶部即可，示例如下：

// 你的Card组件修改后结构
const Card = ({card}) => {
  return (
    <View style={styles.cardWrapper}>
      {/* 把图片组件放在最前面，会渲染在卡片其他内容上方 */}
      <Image source={card.img} style={styles.topImage} />
      {/* 原有卡片其他内容 */}
      <View style={styles.cardContent}>
        {/* 原有内容 */}
      </View>
    </View>
  )
}

方案2：图片固定悬浮在所有卡片的最上方，不随卡片滑动消失 #

直接把图片组件放在<Swiper>标签的同级位置，写在Swiper后面即可，React Native中后渲染的元素默认层级更高，会自动覆盖在Swiper卡片上层：
修改后你的App组件代码如下：

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
        />
        {/* 新增图片组件，写在Swiper后面会自动覆盖在卡片上层 */}
        <Image source={你的图片地址} style={{position: 'absolute', top: 20, alignSelf: 'center'}} />
      </View>
    </SafeAreaView>
  );
}

如果需要调整图片的位置，仅需修改Image组件的style属性的top、left、right等定位参数即可。

内容的提问来源于stack exchange，提问作者WAQAS khattak