Как циклически и визуализировать элементы в React-native?

Можно ли закодировать идентичный компонент в функции Render?

Что-то вроде этого:

...

onPress = () => {
 ...
};

initialArr = [["blue","text1"],["red","text2"]];
buttonsListArr = [];

for (let i = 0; i < initialArr.length; i++) 
{
 buttonsListArr.push(
   <Button style={{borderColor:{initialArr[i][0]}}} onPress={this.onPress.bind(this)}>{initialArr[i][1]}</Button>
 );
}

...

render() {
  return (
    <View style={...}>
     {buttonsListArr}
    </View>
)};

Я имею в виду, что это всего лишь конечный список компонентов, поэтому в этом конкретном случае любые компоненты, такие как ListView/ScrollView и т.д., Неприменимы. Это просто вопрос синтаксиса.

ОТВЕТЫ

Ответ 1

Обычно вы использовали карту для такого рода вещей.

buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo[0]}>{buttonInfo[1]}</Button>
);

(ключ является необходимой поддержкой всякий раз, когда вы выполняете сопоставление в React. Ключ должен быть уникальным идентификатором для сгенерированного компонента)

В качестве стороны я бы использовал объект вместо массива. Я считаю, что это выглядит лучше:

initialArr = [
  {
    id: 1,
    color: "blue",
    text: "text1"
  },
  {
    id: 2,
    color: "red",
    text: "text2"
  },
];

buttonsListArr = initialArr.map(buttonInfo => (
  <Button ... key={buttonInfo.id}>{buttonInfo.text}</Button>
);

Ответ 2

render() {
  return (
    <View style={...}>
       {initialArr.map((prop, key) => {
         return (
           <Button style={{borderColor: prop[0]}}  key={key}>{prop[1]}</Button>
         );
      })}
     </View>
  )
}

должен сделать трюк

Ответ 3

Для исходного массива лучше использовать объект вместо массива, так как тогда вы не будете беспокоиться об индексах, и будет намного понятнее, что это такое:

const initialArr = [{
    color: "blue",
    text: "text1"
}, {
    color: "red",
    text: "text2"
}];

Для фактического сопоставления используйте карту JS Array вместо цикла loop-for, которая должна использоваться в случаях, когда нет определенного массива, например отображения некоторого определенного количества раз:

onPress = () => {
    ...
};

renderButtons() {
    return initialArr.map((item) => {
        return (
            <Button 
                style={{ borderColor: item.color }}
                onPress={this.onPress}
            >
                {item.text}
            </Button>
        );
    });
}

...

render() {
    return (
        <View style={...}>
            {
                this.renderButtons()
            }
        </View>
    )
}

Я переместил отображение в отдельную функцию вне метода render для более читаемого кода. Есть много других способов перебрать список элементов в реакции native, и каким образом вы будете использовать, зависит от того, что вам нужно сделать. Большинство этих способов описаны в этой статье о циклах React JSX, и, хотя он использует примеры React, все, что от него может быть использовано в React Native. Пожалуйста, проверьте это, если вы заинтересованы в этой теме!

Кроме того, не на тему цикла, но поскольку вы уже используете синтаксис массива для определения функции onPress, нет необходимости связывать его снова. Это снова применяется только в том случае, если функция определена с использованием этого синтаксиса внутри компонента, так как синтаксис стрелки автоматически связывает функцию.