0

我陷入了一个非常奇怪的问题......我正在使用第三方库：react-native-deck-swiper；它能够渲染用户的图像，但是，在感觉秒后，它会出现这个错误：undefined is not an object(evaluating'card.image');你能看看我的代码吗？非常感谢您！

我已经安装了：

yarn add react-native-deck-swiper

在这里，我定义了我的卡片组件：

import { StyleSheet, View,Image } from 'react-native'
import React from 'react'



interface UserProps{
  card :{
    image : string,
  }
}
const Card = ({card}:UserProps) => {
  return (
    <View style={styles.Container}>
  <Image source={{uri:card.image}} style={styles.userImage}/>

    </View>
  )
}

export default Card

const styles = StyleSheet.create({
  Container :{
    flex:0.6,
    backgroundColor:'white',
    flexDirection:'column',
    borderRadius:10,
    elevation:10,
    alignItems:'center',
    paddingHorizontal:10,
  },
  userImage:{
    width:80,
    height:80,
    borderRadius:80,
    marginTop:30,
  },
 

})

我的一些用户图像列表：

export default{
    "code": 0,
    "data": [
        {
            "_id": "1",
            "image": "https://i.pinimg.com/564x/49/5e/38/495e3854551b7ecd87631b682b77b31e.jpg",
            "userName": "hei you ",
            "gender": "female",
            "birthday": "1994-4-13",
           
        },
        {
            "_id": "2",
            "image": "https://i.pinimg.com/564x/b5/6f/97/b56f97ac0b8f521586d3aee555070162.jpg",
            "userName": "Mo Mo",
            "gender": "female",
            "birthday": "1995-4-13",
           
        },
        {
            "_id": "3",
            "image": "https://i.pinimg.com/564x/d9/71/8c/d9718c2e22cf0495361c55034941ddf5.jpg",
            "userName": "Jack",
            "gender": "male",
            "birthday": "1991-4-13",
            
        },
        {
            "_id": "4",
            "image": "https://i.pinimg.com/564x/d1/94/8d/d1948d39ef9d38972700592a1673a68c.jpg",
            "userName": "Peter",
            "gender": "male",
            "birthday": "1990-4-13",
           
        },
        {
            "_id": "5",
            "image": "https://i.pinimg.com/564x/a8/15/66/a815661117cdec309b45fe9f8cdf1d70.jpg",
            "userName": "La La",
            "gender": "female",
            "birthday": "1998-4-13",
           
        },
    ],
    "msg": "success"
}

我在 HomeScreen 中使用了它：

import { Image, ImageBackground, StatusBar, StyleSheet, Text, View } from 'react-native';
import React,{useState,useEffect}from 'react';
import Swiper from 'react-native-deck-swiper';
import HomeUsers from '../../services/HomeUsers';
import Card from '../../components/Card';



function HomeScreen(prop:any) {
 const {navigation} = prop;
 const [unreadMsgReceive,setUnreadMsgRceive] = useState(0);
 const [unreadMsgGive,setUnreadMsgGive] =useState(0);
 const [data,setData] = useState([]);
 const [index,setIndex] =useState(0);

 useEffect(()=>{
     setData(HomeUsers.data);
 },[]);

 const onSwiped = () =>{
     setIndex(index +1);
 }
 const netInfo = useNetInfo();
    return (
        <ImageBackground style={styles.bg} source={require('../../assets/images/yellow_bg.png')}>

       {/**Swiper Cards  'rgba(52, 52, 52, 0)'*/}
        <View style={styles.cardsSwipperContainer}>
       <Swiper
       cards ={data}
       cardIndex ={index}
       stackSize={4}
       stackScale={10}
       stackSeparation={14}
       infinite ={true}
       cardVerticalMargin ={10}
       backgroundColor ={'transparent'}
       onSwiped = {onSwiped}
       renderCard = {card =><Card card={card}/>}
       />
       </View>
      

        </ImageBackground>
    );
}

export default HomeScreen;
const styles = StyleSheet.create({
    bg:{
        flex :1,
        resizeMode:"cover",
        flexDirection:'column',
             
    },
    cardsSwipperContainer:{
        flex:0.8
      },
});
4

2 回答 2

1

您将卡片作为道具传递，<Card card={card}/>但没有定义卡片。但是卡。可能只在几秒钟后才注意到本机反应。

于 2022-02-23T23:20:23.120 回答
0

我终于解决了问题，只需要直接传递数据，不需要状态：

 <View style={styles.cardsSwipperContainer}>
   <Swiper
   cards ={HomeUsers.data}
   cardIndex ={index}
   stackSize={4}
   stackScale={10}
   stackSeparation={14}
   cardVerticalMargin ={10}
   backgroundColor ={'transparent'}
   onSwiped = {onSwiped}
   infinite ={true}
   renderCard = {card =><Card card={card}/>}
   />
   </View>
于 2022-02-24T08:39:37.337 回答