React Native 使用带有 for 循环的状态图像列表

Question

我是 React Native 的初学者。我想使用图像列表，然后使用 for 循环将它们推送到子页面

这是我的代码来解释我在说什么。

    state ={
    a: ['./assest/image1.jpg','./assest/image2.jpg','./assest/image3.jpg'],
  }

  b = () => {
    let d = [];
    for (var i = 0; i<=this.state.a.lenght - 1; i++){
    if (this.state.a[i] == ' ') { }
    else {
    d.push(<Child images={this.state.a[i]} />)
      }
    }
    return d;
    };
 
    render() {
    return <ScrollView style={styles.body}>

      {this.b()}
    </ScrollView>
    }
    }
    

这是子页面的代码，它给出了图像 url 并使用 props 设置它

    constructor(props)
{
super(props);
}

  render()
  {
  
  return <View style ={ styles.body}>


<Image style={styles.image}>{this.props.images}</Image>
  </View>
    }
  }

在状态中使用图片网址列表的正确方法是什么

以及如何使用 for 循环推送它们

Answer 1

state = {
    a: ['./assest/image1.jpg','./assest/image2.jpg','./assest/image3.jpg'],
  }

render() {
    return (
       <ScrollView style={styles.body}>
       {
          this.state.a.map((url,key) => 
             <View style ={ styles.body}>
                 <Image 
                    style={styles.image} 
                    source={require(url)} // <--- changed
                  />
             </View>
          )
       }
       </ScrollView>
    )
}