Comment faire une boucle et rendre des éléments dans React-native?

Est-il possible de boucle identique d'un composant en fonction Rendu?

Quelque chose comme ceci:

...

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

Je veux dire c'est juste finis liste de composants, de sorte que tous les composants comme la ListView/ScrollView, etc n'est pas applicable dans ce cas particulier. C'est juste la syntaxe question.

source d'informationauteur Stich

  1. 21

    Vous devez généralement utiliser la carte pour ce genre de chose.

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

    (la clé est nécessaire prop chaque fois que vous faites de la cartographie à Réagir. La clé doit être un identificateur unique pour la composante issue)

    Que d'un côté, je voudrais utiliser un objet au lieu d'un tableau. Je trouve qu'il ressemble plus agréable:

    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. 10
    render() {
  return (
    <View style={...}>
       {initialArr.map((prop, key) => {
         return (
           <Button style={{borderColor: prop[0]}}  key={key}>{prop[1]}</Button>
         );
      })}
     </View>
  )
}

    devrait faire l'affaire

  3. 1

    Pour la table initiale, à une meilleure utilisation de l'objet au lieu de tableau, alors vous ne serez pas se soucier de l'index et il sera beaucoup plus claire de ce qui est quoi:

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

    Réels de la cartographie, l'utilisation de JS de la Matrice de la carte au lieu de la boucle pour boucle doit être utilisé dans les cas où il n'y a pas de véritable matrice définie, comme l'affichage de quelque chose d'un certain nombre de fois:

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

    J'ai déplacé la cartographie de séparer la fonction à l'extérieur de la méthode de rendu pour un code plus lisible.
    Il existe de nombreuses autres façons pour parcourir la liste des éléments à réagir natif, et la façon dont vous allez utiliser dépend de ce que vous devez faire. La plupart de ces méthodes sont couverts dans cet article à propos de Réagir JSX boucles, et même si c'est à l'aide de Réagir exemples, tout de il peut être utilisé dans de Réagir Natif. S'il vous plaît vérifiez si vous êtes intéressé par ce sujet!

    Aussi, pas sur le sujet sur la boucle, mais comme vous êtes déjà à l'aide de la syntaxe de tableau pour la définition de la onPress fonction, il n'y a pas besoin de se lier à nouveau. Encore une fois, cela s'applique uniquement si la fonction est définie en utilisant la syntaxe suivante dans le composant, comme la flèche de la syntaxe auto lie la fonction.