关于android：使用循环并渲染多个jsx项以后再返回渲染


Use a loop and render multiple jsx items later return to render

本问题已经有最佳答案，请猛点这里访问。

我试图找到一种更智能的方法来循环数组并生成jsx并返回到render函数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
  renderCardImages = () => {
    const cards = [
      'Visa',
      'MasterCard',
      'AmericanExpress',
      'Discover',
      'JCB',
    ]
    return (
      <View style={{ flexDirection: 'row' }}>
        <Image source={getCardIcon('Visa')} size={65} />
        <Image source={getCardIcon('MasterCard')} size={65} />
        <Image source={getCardIcon('AmericanExpress')} size={65} />
        <Image source={getCardIcon('Discover')} size={65} />
        <Image source={getCardIcon('JCB')} size={65} />
      </View>
    )
  }

  render () {

    return (
     {renderCardImages()}
    )
  }

我该如何实现这一目标？ 我相信渲染只被调用一次。

1
2
3
4
5
return (
  <View style={{ flexDirection: 'row' }}>
    {card.map(c=>((<Image source={getCardIcon(c)} size={65} />))}
  </View>
)

如果组件是静态的，则将组件移动到组件外部，如果组件是动态的，则将其从组件中获取。 在render函数中使用Array.map()来迭代列表，并呈现卡片：

1
2
3
4
5
6
7
8
9
render () {
  return (
   <View style={{ flexDirection: 'row' }}>
      {cars.map(card => (
        <Image source={getCardIcon(card)} size={65} />        
      ))}
   </View>
  )
}