React Native添加Card组件时报错：Objects are not valid as a React child问题求助

这个报错的根源其实是Card组件的参数接收方式错了，这是React新手很容易踩的坑！

为什么会报错？ #

React组件的函数只会接收一个参数——就是包含所有传入属性的props对象，而不是你写的三个独立参数image, title, subTitle。

现在你的代码里，image变量其实是整个props对象（也就是{title: "Item 1", subTitle: "$50 Million", image: require(...)}），而title和subTitle都是undefined。虽然你看起来是在渲染title和subTitle，但实际上React内部处理时，这个被错误赋值的image对象（也就是props）被当成了子元素来处理，就触发了"Objects are not valid as a React child"的报错。

怎么解决？ #

把Card组件的参数改成解构props对象的形式，这样就能正确拿到你传入的三个属性了。修改后的Card组件代码如下：

import React from 'react';
import {Image, StyleSheet, View} from 'react-native';
import colors from '../config/colors';
import AppText from './AppText';

// 直接解构props里需要的属性
function Card({image, title, subTitle}) {
  return (
    <View style={styles.card}>
      <Image source={image} style={styles.image} />
      <AppText>{title}</AppText>
      <AppText>{subTitle}</AppText>
    </View>
  );
}

const styles = StyleSheet.create({
  card: {
    borderRadius: 15,
    backgroundColor: colors.white,
    marginBottom: 20,
    overflow: 'hidden', // 让图片圆角和card保持一致
  },
  image: {
    width: '100%',
    height: 200, // 固定图片高度，避免布局错乱
  },
});

export default Card;

额外优化说明 #

我还加了两个小细节帮你优化组件：

• 给Image组件添加了宽高样式，避免图片默认拉伸导致的布局问题；
• 在card样式里加了overflow: 'hidden'，这样图片的圆角会和card的圆角匹配，不会出现图片超出圆角边框的情况。

内容的提问来源于stack exchange，提问作者Nandakumar singh