覆蓋 label 出現在反應原生甲板刷卡器的那張卡后面

Question

這是我的代碼。 在刷卡操作時，覆蓋 label 顯示在卡后面向右或向左刷卡。 它與覆蓋 label 的 zIndex 有關。 有什么辦法讓它出現在卡片的頂部而不是卡片的后面。 當它落后時，它實際上被切斷了，只有“Li”或“pe”出現在“like”和“nope”的左右滑動中。

import React, { useRef, useCallback, useEffect, useState } from 'react'
import { View, Text, Image, Dimensions, TouchableOpacity } from 'react-native'
import Swiper from 'react-native-deck-swiper'
import { ScaledSheet, scale, verticalScale, moderateScale } from 'react-native-size-matters';
import Icon from 'react-native-vector-icons/Entypo';
import OIcon from 'react-native-vector-icons/Octicons';
import IIcon from 'react-native-vector-icons/Ionicons';
import BrandLogo from '../components/atoms/BrandLogo';
import Header from '../components/atoms/Header';
import Loader from '../components/atoms/Loader';
import Card from '../components/atoms/Card';
import IconButton from '../components/atoms/IconButton';
import OverlayLabel from '../components/atoms/OverlayLabel';
import {COLORS, FONTS, SPACING} from '../constants/theme';
const { height, width } = Dimensions.get('window');
import {useDiscoverProfiles} from '../zustand/useDiscoverProfiles';
import {useFocusEffect} from '@react-navigation/native';
import {useUserAction} from '../zustand/useUserAction';

const HomeScreen = () => {
  const getDiscoverProfiles = useDiscoverProfiles(state => state.getDiscoverProfiles);
  const discoverProfiles = useDiscoverProfiles(state => state.discoverProfiles);
  const discoverProfilesLoader = useDiscoverProfiles(state => state.discoverProfilesLoader);
  const profileCount = useDiscoverProfiles(state => state.profileCount);
  const likeUser = useUserAction(state => state.like);
  const skipUser = useUserAction(state => state.skip);
  const blockUser = useUserAction(state => state.block);
  // const [userId, setuserId] = useState(null);
  const [cardIndexCount, setcardIndexCount] = useState(0);
  const [isSwipeAll, setisSwipeAll] = useState(false);

  const useSwiper = useRef(null);
  const handleOnSwipedLeft = (cardIndex) => {
    // onPressSkip(discoverProfiles[cardIndex].id);
    setcardIndexCount(cardIndex + parseInt(1));
    return useSwiper.current.swipeLeft();
  }
  const handleOnSwipedTop = (cardIndex) => {
    // onPressBlock(discoverProfiles[cardIndex].id);
    setcardIndexCount(cardIndex + parseInt(1));
    return useSwiper.current.swipeTop();
  }
  const handleOnSwipedRight = (cardIndex) => {
    // onPressLike(discoverProfiles[cardIndex].id);
    setcardIndexCount(cardIndex + parseInt(1));
    return useSwiper.current.swipeRight();
  }
  const onPressSkip = async(cardIndex) => {
    // await skipUser(discoverProfiles[cardIndex].id);
  }
  const onPressBlock = async(cardIndex) => {
    // await blockUser(discoverProfiles[cardIndex].id);
  }
  const onPressLike = async(cardIndex) => {
    // await likeUser(discoverProfiles[cardIndex].id);
  }
  const cardDetails = (index) => {
    console.log({'index ID':index, 'user id':discoverProfiles[index].id});
  }

  useEffect(() => {
    getDiscoverProfiles();
    setisSwipeAll(false);
  }, []);

  useFocusEffect(
    useCallback(() => {
      getDiscoverProfiles();
      setisSwipeAll(false);
    }, []),
  );

  return (
    <>
      <Header />
      {discoverProfilesLoader ? 
        <Loader />
      :
        <View
          style={styles.container}
        >
          {isSwipeAll || discoverProfiles.length == 0 ?
            <View style={{justifyContent:'center', alignItems:'center'}}>
              <Text style={styles.payheaderText}>
                Sorry, we didn't find any recommendations for you today.
              </Text>
              <Text style={styles.paysubText}>
                Consider opening up your preferences. Even expanding your search distance by a few miles can make a difference.
              </Text>
              <TouchableOpacity onPress={()=>{}}>
                <Text style={styles.payBtn}>
                  Edit my preferences <IIcon name="arrow-forward-sharp" size={18} color="#fff" style={{ padding: 10 }} />
                </Text>
              </TouchableOpacity>
            </View>
          :
            <View style={styles.swiperContainer}>
              <Swiper
                ref={useSwiper}
                animateCardOpacity
                containerStyle={styles.container}
                cards={discoverProfiles}
                renderCard={(card, index) => <Card card={card} />}
                disableTopSwipe
                disableBottomSwipe
                onSwipedAll={()=>setisSwipeAll(true)}
                onTapCard={(index)=>cardDetails(index)}
                onSwipedLeft={(cardIndex)=>{
                  setcardIndexCount(cardIndex + parseInt(1));
                  onPressSkip(cardIndex);
                }}
                onSwipedRight={(cardIndex)=>{
                  setcardIndexCount(cardIndex + parseInt(1));
                  onPressLike(cardIndex);
                }}
                cardIndex={0}
                backgroundColor="white"
                stackSize={3}
                // infinite
                showSecondCard
                // animateOverlayLabelsOpacity
                overlayOpacityHorizontalThreshold={width/4}
                cardVerticalMargin={50}
                cardHorizontalMargin={30}
                overlayLabels={{
                  left: {
                    title: 'SKIP',
                    element: <OverlayLabel label="SKIP" color="red" />,
                    style: {
                      wrapper: styles.overlayWrapper,
                    },
                  },
                  right: {
                    title: 'LIKE',
                    element: <OverlayLabel label="LIKE" color="green" />,
                    style: {
                      wrapper: {
                        ...styles.overlayWrapper,
                        alignItems: 'flex-start',
                        marginLeft: 30,
                      },
                    },
                  },
                }}
              />
            </View>
          }
          {!isSwipeAll &&
            <View style={styles.buttonsContainer}>
              <IconButton
                name="close"
                onPress={()=>handleOnSwipedLeft(cardIndexCount)}
                color="white"
                backgroundColor="#E5566D"
              />
              <IconButton
                name="star"
                onPress={()=>handleOnSwipedTop(cardIndexCount)}
                color="white"
                backgroundColor="#3CA3FF"
              />
              <IconButton
                name="heart"
                onPress={()=>handleOnSwipedRight(cardIndexCount)}
                color="white"
                backgroundColor="#4CCC93"
              />
            </View>
          }
          <View style={{ flexDirection: 'row', backgroundColor: '#3E1D49' }}>
            <View style={{ justifyContent: 'center', alignItems: 'center', width: '33%' }}>
              <Icon name="message" size={20} color="#fff" style={{ padding: 10 }} />
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center', width: '33%' }}>
              <Icon name="location" size={20} color="#fff" style={{ padding: 10 }} />
            </View>
            <View style={{ justifyContent: 'center', alignItems: 'center', width: '33%' }}>
              <Icon name="user" size={20} color="#fff" style={{ padding: 10 }} />
            </View>
          </View>
        </View>
      }
    </>
  )
};

const styles = ScaledSheet.create({
  container: {
    backgroundColor:'#fff',
    flex: 1,
    justifyContent: 'space-between',
  },
  swiperContainer: {
    height: '50%',
  },
  buttonsContainer: {
    justifyContent: 'space-between',
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: '15%',
    paddingTop: '15@ms',
  },
  overlayWrapper: {
    flexDirection: 'column',
    alignItems: 'flex-end',
    justifyContent: 'flex-start',
    marginTop: '30@ms',
    marginLeft: '-30@ms'
  },
  payheaderText: {
    fontFamily: 'Poppins',
    fontSize: '18@ms',
    color:'#000',
    marginTop:'50@ms',
    textAlign:'center',
    paddingHorizontal:'5%'
  },
  paysubText: {
    fontFamily: 'Poppins',
    fontSize: '14@ms',
    width:'80%',
    textAlign:'center',
    marginTop:'20@ms'
  },
  payBtn: {
    fontFamily: 'Poppins',
    fontSize: '15@ms',
    textAlign:'center',
    paddingVertical: '7@ms',
    paddingHorizontal: '20@ms',
    borderRadius: '20@ms',
    marginTop:'25@ms',
    backgroundColor: '#319795',
    color: '#fff',
    fontWeight: '700',
    alignSelf:'center',
  },
});

export default HomeScreen;


  
  
  
 
   
 
    
    import React, { useRef, useCallback, useEffect, useState } from 'react'
    import { View, Text, Image, Dimensions, TouchableOpacity } from 'react-native'
    import Swiper from 'react-native-deck-swiper'
    import { ScaledSheet, scale, verticalScale, moderateScale } from 'react-native-size-matters';
    import Icon from 'react-native-vector-icons/Entypo';
    import OIcon from 'react-native-vector-icons/Octicons';
    import IIcon from 'react-native-vector-icons/Ionicons';
    import BrandLogo from '../components/atoms/BrandLogo';
    import Header from '../components/atoms/Header';
    import Loader from '../components/atoms/Loader';
    import Card from '../components/atoms/Card';
    import IconButton from '../components/atoms/IconButton';
    import OverlayLabel from '../components/atoms/OverlayLabel';
    import {COLORS, FONTS, SPACING} from '../constants/theme';
    const { height, width } = Dimensions.get('window');
    import {useDiscoverProfiles} from '../zustand/useDiscoverProfiles';
    import {useFocusEffect} from '@react-navigation/native';
    import {useUserAction} from '../zustand/useUserAction';

    const HomeScreen = () => {
      const getDiscoverProfiles = useDiscoverProfiles(state => state.getDiscoverProfiles);
      const discoverProfiles = useDiscoverProfiles(state => state.discoverProfiles);
      const discoverProfilesLoader = useDiscoverProfiles(state => state.discoverProfilesLoader);
      const profileCount = useDiscoverProfiles(state => state.profileCount);
      const likeUser = useUserAction(state => state.like);
      const skipUser = useUserAction(state => state.skip);
      const blockUser = useUserAction(state => state.block);
      // const [userId, setuserId] = useState(null);
      const [cardIndexCount, setcardIndexCount] = useState(0);
      const [isSwipeAll, setisSwipeAll] = useState(false);

      const useSwiper = useRef(null);
      const handleOnSwipedLeft = (cardIndex) => {
        // onPressSkip(discoverProfiles[cardIndex].id);
        setcardIndexCount(cardIndex + parseInt(1));
        return useSwiper.current.swipeLeft();
      }
      const handleOnSwipedTop = (cardIndex) => {
        // onPressBlock(discoverProfiles[cardIndex].id);
        setcardIndexCount(cardIndex + parseInt(1));
        return useSwiper.current.swipeTop();
      }
      const handleOnSwipedRight = (cardIndex) => {
        // onPressLike(discoverProfiles[cardIndex].id);
        setcardIndexCount(cardIndex + parseInt(1));
        return useSwiper.current.swipeRight();
      }
      const onPressSkip = async(cardIndex) => {
        // await skipUser(discoverProfiles[cardIndex].id);
      }
      const onPressBlock = async(cardIndex) => {
        // await blockUser(discoverProfiles[cardIndex].id);
      }
      const onPressLike = async(cardIndex) => {
        // await likeUser(discoverProfiles[cardIndex].id);
      }
      const cardDetails = (index) => {
        console.log({'index ID':index, 'user id':discoverProfiles[index].id});
      }

      useEffect(() => {
        getDiscoverProfiles();
        setisSwipeAll(false);
      }, []);

      useFocusEffect(
        useCallback(() => {
          getDiscoverProfiles();
          setisSwipeAll(false);
        }, []),
      );

      return (
        <>
          <Header />
          {discoverProfilesLoader ? 
            <Loader />
          :
            <View
              style={styles.container}
            >
              {isSwipeAll || discoverProfiles.length == 0 ?
                <View style={{justifyContent:'center', alignItems:'center'}}>
                  <Text style={styles.payheaderText}>
                    Sorry, we didn't find any recommendations for you today.
                  </Text>
                  <Text style={styles.paysubText}>
                    Consider opening up your preferences. Even expanding your search distance by a few miles can make a difference.
                  </Text>
                  <TouchableOpacity onPress={()=>{}}>
                    <Text style={styles.payBtn}>
                      Edit my preferences <IIcon name="arrow-forward-sharp" size={18} color="#fff" style={{ padding: 10 }} />
                    </Text>
                  </TouchableOpacity>
                </View>
              :
                <View style={styles.swiperContainer}>
                  <Swiper
                    ref={useSwiper}
                    animateCardOpacity
                    containerStyle={styles.container}
                    cards={discoverProfiles}
                    renderCard={(card, index) => <Card card={card} />}
                    disableTopSwipe
                    disableBottomSwipe
                    onSwipedAll={()=>setisSwipeAll(true)}
                    onTapCard={(index)=>cardDetails(index)}
                    onSwipedLeft={(cardIndex)=>{
                      setcardIndexCount(cardIndex + parseInt(1));
                      onPressSkip(cardIndex);
                    }}
                    onSwipedRight={(cardIndex)=>{
                      setcardIndexCount(cardIndex + parseInt(1));
                      onPressLike(cardIndex);
                    }}
                    cardIndex={0}
                    backgroundColor="white"
                    stackSize={3}
                    // infinite
                    showSecondCard
                    // animateOverlayLabelsOpacity
                    overlayOpacityHorizontalThreshold={width/4}
                    cardVerticalMargin={50}
                    cardHorizontalMargin={30}
                    overlayLabels={{
                      left: {
                        title: 'SKIP',
                        element: <OverlayLabel label="SKIP" color="red" />,
                        style: {
                          wrapper: styles.overlayWrapper,
                        },
                      },
                      right: {
                        title: 'LIKE',
                        element: <OverlayLabel label="LIKE" color="green" />,
                        style: {
                          wrapper: {
                            ...styles.overlayWrapper,
                            alignItems: 'flex-start',
                            marginLeft: 30,
                          },
                        },
                      },
                    }}
                  />
                </View>
              }
              {!isSwipeAll &&
                <View style={styles.buttonsContainer}>
                  <IconButton
                    name="close"
                    onPress={()=>handleOnSwipedLeft(cardIndexCount)}
                    color="white"
                    backgroundColor="#E5566D"
                  />
                  <IconButton
                    name="star"
                    onPress={()=>handleOnSwipedTop(cardIndexCount)}
                    color="white"
                    backgroundColor="#3CA3FF"
                  />
                  <IconButton
                    name="heart"
                    onPress={()=>handleOnSwipedRight(cardIndexCount)}
                    color="white"
                    backgroundColor="#4CCC93"
                  />
                </View>
              }
              <View style={{ flexDirection: 'row', backgroundColor: '#3E1D49' }}>
                <View style={{ justifyContent: 'center', alignItems: 'center', width: '33%' }}>
                  <Icon name="message" size={20} color="#fff" style={{ padding: 10 }} />
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', width: '33%' }}>
                  <Icon name="location" size={20} color="#fff" style={{ padding: 10 }} />
                </View>
                <View style={{ justifyContent: 'center', alignItems: 'center', width: '33%' }}>
                  <Icon name="user" size={20} color="#fff" style={{ padding: 10 }} />
                </View>
              </View>
            </View>
          }
        </>
      )
    };

    const styles = ScaledSheet.create({
      container: {
        backgroundColor:'#fff',
        flex: 1,
        justifyContent: 'space-between',
      },
      swiperContainer: {
        height: '50%',
      },
      buttonsContainer: {
        justifyContent: 'space-between',
        alignItems: 'center',
        flexDirection: 'row',
        paddingHorizontal: '15%',
        paddingTop: '15@ms',
      },
      overlayWrapper: {
        flexDirection: 'column',
        alignItems: 'flex-end',
        justifyContent: 'flex-start',
        marginTop: '30@ms',
        marginLeft: '-30@ms'
      },
      payheaderText: {
        fontFamily: 'Poppins',
        fontSize: '18@ms',
        color:'#000',
        marginTop:'50@ms',
        textAlign:'center',
        paddingHorizontal:'5%'
      },
      paysubText: {
        fontFamily: 'Poppins',
        fontSize: '14@ms',
        width:'80%',
        textAlign:'center',
        marginTop:'20@ms'
      },
      payBtn: {
        fontFamily: 'Poppins',
        fontSize: '15@ms',
        textAlign:'center',
        paddingVertical: '7@ms',
        paddingHorizontal: '20@ms',
        borderRadius: '20@ms',
        marginTop:'25@ms',
        backgroundColor: '#319795',
        color: '#fff',
        fontWeight: '700',
        alignSelf:'center',
      },
    });

    export default HomeScreen;
 
   
 
  

Answer 1

在 styles.overlayWrapper 上使用海拔高度