Javascript 如何在平面列表中动态设置本机映像源

我是新手，我正在尝试用图像填充平面列表。所有图像都存储在应用程序中。我想在每次迭代中动态设置图像源。这就是我试过的。请帮帮我

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={
    (item)=>{
     switch(item.TypeX){
     case '1':
     return require('path 1');
     case '2':
     return require('path 2')
   }
}} />
  }
</FlatList>

{
{
开关（项目类型X）{
案例“1”：
返回要求（“路径1”）；
案例“2”：
返回要求（'路径2'）
}
}} />
}

数据中应该有图像。。在listDate中您的情况

state = {
  listData: [
  {...,image:require('1.png')},
  {...,image:require('2.png')}
  ...
 ]
}

然后在渲染函数中

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={item.image}
}} />
  }
</FlatList>

在渲染函数中，应该使用以下代码

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.image}}
}} />
  }
</FlatList>

{
}

---

如果要从api中获取记录，请将请求放入

componentDidMount

react回调中，并使用

setState

函数设置数据，数据中应该有图像。。在listDate中您的情况

state = {
  listData: [
  {...,image:require('1.png')},
  {...,image:require('2.png')}
  ...
 ]
}

然后在渲染函数中

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={item.image}
}} />
  }
</FlatList>

在渲染函数中，应该使用以下代码

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.image}}
}} />
  }
</FlatList>

{
}

---

如果您正在从api获取记录，则将请求放在

componentDidMount

react回调中，并使用

setState

函数设置数据

我认为将开关放在image source prop中不是一个好主意。也不确定它是否会起作用。但是，您可以做一件事。当您从API获取数据并填充到listData数组中时，您可以在从API获取数据之后附加图像的url/路径 例如，您收到一个对象数组作为响应：

res=[ { data1:'', data2:''..   },{ data1:'', data2:''.. },{ data1:'', data2:''.. },{ 
   data1:'', data2:''.. }];

因此，您可以迭代此数组并像下面这样附加图像：

res.map((obj, i) => { 
   let path = imagepPathArray[i]; 
   return {...obj, imagePath: path  
   }
})

并访问平面列表中的图像路径，如下所示：

renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.imagePath}}
}}

renderItem={（{item}）=>{
我认为将开关放在图像源属性中不是一个好主意。也不确定它是否会工作。但是，您可以做一件事。当您从API获取数据时，您正在填充listData数组，您可以在从API获取数据之后附加图像的url/路径
例如，您收到一个对象数组作为响应：

res=[ { data1:'', data2:''..   },{ data1:'', data2:''.. },{ data1:'', data2:''.. },{ 
   data1:'', data2:''.. }];

因此，您可以迭代此数组并像下面这样附加图像：

res.map((obj, i) => { 
   let path = imagepPathArray[i]; 
   return {...obj, imagePath: path  
   }
})

并访问平面列表中的图像路径，如下所示：

renderItem={({ item }) => {
   <Image                                                             
    source={{uri: item.imagePath}}
}}

renderItem={（{item}）=>{
我找到了解决办法，
我们可以在componet中创建如下简单函数

getFanSpeedImage(speed) {
        switch (speed) {
            case '1':
                return (<Image style={styles.statusButton} source={require('1.png')} />);
            case '2':
                return (<Image style={styles.statusButton} source={require('2.png')} />);
            case '3':
                return (<Image style={styles.statusButton} source={require('3.png')} />);
        }

    }

getFanSpeedImage（速度）{
开关（速度）{
案例“1”：
返回（）；
案例“2”：
返回（）；
案例“3”：
返回（）；
}
}

之后，我们可以调用它的主渲染函数，如下所示

render(){
   return(

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
    {this.getFanSpeedImage(item.typeX)}
  }
</FlatList>

);

render（）{
返回(
{
{this.getFanSpeedImage（item.typeX）}
}
);

}我找到了解决办法，
我们可以在componet中创建如下简单函数

getFanSpeedImage(speed) {
        switch (speed) {
            case '1':
                return (<Image style={styles.statusButton} source={require('1.png')} />);
            case '2':
                return (<Image style={styles.statusButton} source={require('2.png')} />);
            case '3':
                return (<Image style={styles.statusButton} source={require('3.png')} />);
        }

    }

getFanSpeedImage（速度）{
开关（速度）{
案例“1”：
返回（）；
案例“2”：
返回（）；
案例“3”：
返回（）；
}
}

之后，我们可以调用它的主渲染函数，如下所示

render(){
   return(

<FlatList
  data={this.state.listData}
  renderItem={({ item }) => {
    {this.getFanSpeedImage(item.typeX)}
  }
</FlatList>

);

render（）{
返回(
{
{this.getFanSpeedImage（item.typeX）}
}
);

}
您也可以使用库。此库有助于放置占位符，直到您的图像未从internet或API下载

renderItem={({item}) =>
    <PlaceHolderImage
    source={!!data.imageurl ? { uri: imgURL } : AppImages.placeHolderImage.source}
    style={iconStyle}
    placeHolderURI={AppImages.placeholderImage.source}
                    />
}

renderItem={（{item}）=>
}
您也可以使用库。此库有助于放置占位符，直到您的图像未从internet或API下载

renderItem={({item}) =>
    <PlaceHolderImage
    source={!!data.imageurl ? { uri: imgURL } : AppImages.placeHolderImage.source}
    style={iconStyle}
    placeHolderURI={AppImages.placeholderImage.source}
                    />
}

renderItem={（{item}）=>
}
每当您在使用
平面列表时必须显示图像时，如果您将图像保存在一个数组中，并将其作为
数据
传递到
平面列表

因此，首先，尝试按如下方式构造数据


const数据=[{
id:1，
名称：“皮卡丘”，
图像：require（'./path/pikachu.png'），
},
{
id:2，
名称：'一加'，
image:require（'./path/onPlus.png'），
},
{
id:3，
名称：“英雄职业”，
图像：require（'./path/goPro.png'），
},
]
每当您在使用
平面列表时必须显示图像时，如果您将图像保存在一个数组中，并将其作为
数据
传递到
平面列表

因此，首先，尝试按如下方式构造数据


const数据=[{
id:1，
名称：“皮卡丘”，
图像：require（'./path/pikachu.png'），
},
{
id:2，
名称：'一加'，
image:require（'./path/onPlus.png'），
},
{
id:3，
名称：“英雄职业”，
图像：require（'./path/goPro.png'），
},
]
hi，我没有硬记录state上的列表数据。我是从API调用获取的。我不能在image source prop中使用switch case语句吗？如果您从API中获取记录，则将请求放入
componentDidMount
react回调，并使用
setState
函数设置数据hi，我没有硬记录列表状态数据。我从API调用获取它。我不能在图像源属性中使用switch case语句吗？如果从API获取记录，则将请求放入
componentDidMount
react回调，并使用
setState
函数设置数据如果显示100个图像，那么使用100个案例如何？如果显示100个图像，那么要用100箱吗？