在平面列表中渲染许多图像时，如何将包含图像位置的道具传递给图像源？

Posted 2023-02-22

【中文标题】在平面列表中渲染许多图像时，如何将包含图像位置的道具传递给图像源？

【英文标题】：How do I pass a prop that contains the image location to image source when rendering many images in a flatlist?

【发布时间】：2021-12-07 16:20:14

【问题描述】：

我下面的代码接受inputPhotoLocation 作为道具。 inputPhotoLocation 包含图像源位置列表（已从包含列表的文件中检索到）。我需要一种方法将这些传递给我的图像源。我已经能够成功地直接在文本框中传递位置。

function SelectionBoxComponent(inputPhotoLocation, inputText, onPress) 
    return (

        <TouchableWithoutFeedback onPress=onPress>
            <View style=styles.box>
                <View style=styles.circularPhoto>
                    <Image style=height:"100%", width:"100%", borderRadius:70,
                        borderWidth:0, source=require(inputPhotoLocation) ></Image> /* Here I need to insert the list items */
                </View>

                <AppText style=styles.textStyle onPress=console.log(inputText) >
                    inputText</AppText>

            </View>
        </TouchableWithoutFeedback>

我的 inputPhotoLocation 道具包含这个：

./assets/GroupImages/football.jpg

../assets/GroupImages/valley.jpg

../assets/GroupImages/usa.jpg

../assets/GroupImages/playstation.jpg

../assets/GroupImages/pc.jpg

我能够成功地将这些位置作为文本输出传递。但是，我不知道如何在图像源中传递这些。

【参考方案1】：

      <Image
        style=
          height: '100%',
          width: '100%',
          borderRadius: 70,
          borderWidth: 0,
          /* The source prop is not a style prop */
          source=require(inputPhotoLocation)
        ></Image>



      <Image
        /* The source prop is Image prop */
        source=require(inputPhotoLocation)
        style=
          height: '100%',
          width: '100%',
          borderRadius: 70,
          borderWidth: 0
        ></Image>

【讨论】：

谢谢，成功了！

这似乎是不平衡的 - 每个块都有一个额外的“”（也由奇怪的语法突出显示）。 require(inputPhotoLocation) 不应该是 require(inputPhotoLocation) （末尾有一个额外的“”）？ （这应该独立于comment character sequence requirements。）

明确地说，主要关注的是此 Stack Overflow 页面上的语法突出显示。要么修复代码，要么关闭语法高亮（例如使用code fence ``lang-none ... ```）。

这里的示例代码有效吗？

是的，低码有效。我发布了这两个变体以明确什么是错误的以及哪一行导致了问题。