如何在JSX中重复一个元素?

<View>
  {[...Array(5)].map((x, i) => <Image key={i} source={require('../images/image.png')} />)}
</View>

这个 [...Array(5)] [undefined, undefined, undefined, undefined, undefined] map() 我们可以用它来返回我们想要的组件(我们不需要 x

为了提高性能,可以在渲染外部创建数组,以防止在每次重新渲染时重新创建临时数组。你也可以把你的 require 因为相似的原因分开。

在返回jsx之前,可以将其存储在变量中。

const myjsx = [];
for(let i = 0; i < 4; i++) {
   myjsx.push(<Image source={require('../images/image.png')} />);
}

然后在最终的JSX中,您只需打印出{myjsx}

<View>
    {myjsx}
</View>

let func = () => (<Image source={require('../images/image.png')} />) <View> {func()} {func()} {func()} {func()} {func()} </View>

您可以添加一个循环或从中执行其他重构。

试试这个:

const totalImages = 10;
<View>
{ 
   (new Array(totalImages)).fill(<Image source={require('../images/image.png')}/>)
}
</View>

renderImages() {
    var images = [];
    for (var i = 0; i < numrows; i++) {
        images.push(<Image source={require('../images/image.png')} />);
    }
    return images;
}

在render方法中,只需调用函数名:

{renderImages()}

<View>
    {() => {
        const
            longArray = new Array(7),
            image = require('../images/image.png');
        return longArray.map((k, i) => <Image key={k} source={image} />);
    }}
</View>