Question

我正在Coursera上的 React Native多平台移动应用开发课程中，在该课程中，讲师使用了Card组件。但是当我在项目中完全使用相同的代码时，我得到了警告。

Warning: Failed prop type: Invalid props.style key `0` supplied to `Image`.

here是完整的警告消息。我认为以下代码会引起警告，

import React from 'react';
import { Text, View } from 'react-native';
import { Card } from 'react-native-elements';

function RenderDish(props) {
  const dish = props.dish;

  if (dish != null) {
    return (
      <Card
        featuredTitle={dish.name}
        image={require('./images/uthappizza.png')}
      >
        <Text style={{ margin: 10 }}>{dish.description}</Text>
      </Card>
    );
  } else {
    return <View></View>;
  }
}
function Dishdetail(props) {
  return <RenderDish dish={props.dish} />;
}
export default Dishdetail;

但是我不明白为什么会发出这个警告？我没有通过任何与风格有关的道具，那为什么会这样呢？我衷心感谢有人帮助我解决这个问题。

正如@Maycon Mesquita所说，我在<Card style={{ width: 150, height: 150 }}>中尝试使用Card作为道具，但警告仍然存在。

Answer 1

<Card />组件将array's element作为style's prop传递给Image。这是错误的。

尝试将宽度/高度设置为card。

但是，在不知道卡的代码的情况下，我会尝试使用通用样式的道具：

选项A：style={{ width: 150, height: 150 }}

选项B：containerStyle={{ width: 150, height: 150 }}

否则，您需要将Card的组件代码发布到Image道具的名称上。

警告：道具类型失败：提供给“图片”的props.style密钥“ 0”无效

1 个答案: