我的图像元素循环在 React Native 中无法正常工作

Posted 2023-03-14

【中文标题】我的图像元素循环在 React Native 中无法正常工作

【英文标题】：My loop of image elements is not working as I want it to in React Native

【发布时间】：2021-03-28 16:42:40

【问题描述】：

我在另一个文件中有一个具有某些属性的对象，例如名称、年份、uri 等...（顺便说一句，我确实导入和导出了它）

我想创建一个函数来循环所有这些对象，它会显示一个粉红色圆圈的图像和每个对象的 uri（uri 存储图像），用于存在的对象数量 - 我将附上我希望它如下所示。

函数如下：

const populateSeries = () => 
for (let i in seriesList) 
        <ImageBackground style=externalStyle.circle source=require('../assets/circle.png')>
        <Image style=externalStyle.image source=seriesList[i].uri/>
        </ImageBackground>
       
   

我在下面这样称呼它：

<ScrollView>
       <View>
         populateSeries()
       </View> 
</ScrollView> 

它没有显示任何内容。我不确定如何在我的代码的显示位中放置一个循环。有人可以帮忙吗？我很肯定 uri 位可以正常工作，因为我在 <View> 内对其进行了测试，并且工作正常。

【参考方案1】：

创建一个数组并将您的项目推入其中，这应该可以！ ：

//Top of your component
const populateSeries = [];
for (let i in seriesList) 
   populateSeries.push(<ImageBackground style=externalStyle.circle source= 
   require('../assets/circle.png')>
    <Image style=externalStyle.image source=seriesList[i].uri/>
    </ImageBackground>);
  

 //on return
<ScrollView>
   <View>
     populateSeries
   </View> 
</ScrollView> 

【讨论】：

非常感谢！在过去的 2 个小时里，我一直在挠头。这解决了它。

很高兴知道:)

【参考方案2】：

您的函数应该返回组件，但我没有看到它返回任何内容。试试这个：

<ScrollView>
       <View>
         
            seriesList.map((seri) => 
               return (
                  <ImageBackground style=externalStyle.circle source=require('../assets/circle.png')>
                    <Image style=externalStyle.image source=seri.uri/>
                  </ImageBackground>
               )
            )
         
       </View> 
</ScrollView> 

【讨论】：

谢谢！第一个答案解决了它，但如果我将来有问题，我会记住这一点！

【参考方案3】：

您的 populateSeries 不返回任何内容，因此您的视图不显示任何内容。

如果您想通过在数组中循环来呈现组件，请尝试使用flatList。

<ScrollView>
       <View>
         <FlatList
          data=seriesList
          renderItem=( item ) => (
            <ImageBackground style=externalStyle.circle source=               require('../assets/circle.png')>
            <Image style=externalStyle.image source=item.uri/>
            </ImageBackground>
          )
          keyExtractor=item => item.id
        />
       </View> 
</ScrollView>

【讨论】：

谢谢！第一个答案解决了它，但如果我将来有问题，我会记住这一点！