Как повторить один элемент в JSX?

Вы можете создать короткую функцию, чтобы сделать это за вас

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

Вы можете добавить цикл или выполнить дополнительные рефакторинги оттуда.

Легкий! Вы можете создать массив на лету. Нравится:

<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>

Попробуй это:

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

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

Вы можете создать функцию, которая выполняет цикл и возвращает рассматриваемые элементы.

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

В методе рендеринга вы просто вызываете имя функции как таковое:

{renderImages()}