react-native - 如何将图像位置作为 Prop 传递给另一个组件并在 require 方法中使用它

Question

我有两个 .js 文件。第二个文件呈现一个卡片组件。我希望从具有不同图像位置的第一个文件调用此组件 3 次作为第二个文件的 Prop ，并通过第二个文件中的 require 方法显示图像。这是我试过的。
第一个文件

<CardContent
        dp= "'../images/1Dp.jpg'" />
<CardContent
        dp= "'../images/2Dp.jpg'" />
<CardContent
        dp= "'../images/3Dp.jpg'" />

第二个文件

const { dp } = props;
return(
  <Card>
    <CardItem>
      <Left>
        <Thumbnail source={require({dp})} /> 
      </Left>
    </CardItem>
  </Card>
);

注意:图像位置是 w.r.t 到第二个文件的位置。
错误:require must have single string literal argument(这是我在运行应用程序时遇到的错误)

Answer 1

这里有一些你可以尝试的东西，

在第一个文件中写入如下代码:

<CardContent
        dp= {require('../images/1Dp.jpg')} />
<CardContent
        dp= {require('../images/2Dp.jpg')} />
<CardContent
        dp= {require('../images/3Dp.jpg')} />

然后在你的第二个文件中，重写如下:

const { dp } = props;
return(
  <Card>
    <CardItem>
      <Left>
        <Thumbnail source={dp} /> 
      </Left>
    </CardItem>
  </Card>
);

我相信这应该有效。这就是我如何解决同样的问题。希望对你有帮助