react-native - loop - react iterating

¿Cómo hacer un bucle y renderizar elementos en React-native?

Question

¿Es posible enlazar un componente idéntico en la función Render?

Algo como esto:

...

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>
)};

Quiero decir que esto es solo una lista finita de componentes, por lo que cualquier componente como ListView / ScrollView, etc. no es aplicable en este caso particular. Esto es sólo una pregunta de sintaxis.

Answer 1

Para la matriz inicial, use mejor el objeto en lugar de la matriz, ya que entonces no se preocupará por los índices y será mucho más claro qué es qué:

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

Para el mapeo real, use el mapa JS Array en lugar del bucle for - el bucle for se debe usar en los casos en que no hay un arreglo real definido, como mostrar algo un cierto número de veces:

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

Moví la asignación a una función separada fuera del método de procesamiento para obtener un código más legible. Hay muchas otras formas de recorrer la lista de elementos para reaccionar de forma nativa, y la forma en que lo utilice depende de lo que debe hacer. La mayoría de estas formas se tratan en este artículo sobre los bucles React JSX , y aunque está utilizando ejemplos de React, todo lo que se puede usar en React Native. Por favor, compruebe si está interesado en este tema!

Además, no en el tema del bucle, pero como ya está utilizando la sintaxis de matriz para definir la función onPress, no es necesario vincularla de nuevo. Esto, nuevamente, se aplica solo si la función se define utilizando esta sintaxis dentro del componente, ya que la sintaxis de flecha vincula automáticamente la función.

Answer 2

Usualmente usarías el mapa para ese tipo de cosas.

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

(la clave es una propiedad necesaria cuando haces mapeo en React. La clave debe ser un identificador único para el componente generado)

Como un lado, usaría un objeto en lugar de una matriz. Me parece que se ve mejor:

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

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

Answer 3

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

debería hacer el truco