Comment boucler et rendre des éléments dans React-native ?

Question

Est-il possible de boucler un composant identique dans la fonction Render ?

Algo así:

...

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 qu'il s'agit juste d'une liste finie de composants, donc tout composant comme ListView/ScrollView etc. n'est pas applicable dans ce cas particulier. C'est juste une question de syntaxe.

Answer 1

On utilise généralement une carte pour ce genre de choses.

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

(la clé est un accessoire nécessaire chaque fois que l'on fait du mapping dans React. La clé doit être un identifiant unique pour le composant généré)

Par ailleurs, j'utiliserais un objet plutôt qu'un tableau. Je trouve que c'est plus joli :

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 2

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

devrait faire l'affaire

Answer 3

Pour un tableau initial, il est préférable d'utiliser un objet plutôt qu'un tableau, car vous n'aurez alors plus à vous soucier des index et vous saurez beaucoup plus clairement ce qui est quoi :

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

Pour le mappage réel, utilisez JS Array map au lieu de for loop - for loop devrait être utilisé dans les cas où il n'y a pas de tableau défini, comme afficher quelque chose 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é le mappage dans une fonction séparée en dehors de la méthode de rendu pour un code plus lisible. Il y a beaucoup d'autres façons de boucler une liste d'éléments dans react native, et la façon que vous utiliserez dépendra de ce que vous avez besoin de faire. La plupart de ces méthodes sont couvertes dans cet article sur les boucles React JSX Bien qu'il utilise des exemples de React, tout ce qu'il contient peut être utilisé dans React Native. N'hésitez pas à y jeter un coup d'œil si vous êtes intéressé par ce sujet !

Par ailleurs, en dehors du sujet de la boucle, comme vous utilisez déjà la syntaxe du tableau pour définir la fonction onPress, il n'est pas nécessaire de la lier à nouveau. Encore une fois, cela ne s'applique que si la fonction est définie à l'aide de cette syntaxe dans le composant, car la syntaxe de la flèche lie automatiquement la fonction.

Answer 4

Si vous voulez un départ direct/rapide, sans avoir à vous préoccuper des variables :

{
 urArray.map((prop, key) => {
     console.log(emp);
     return <Picker.Item label={emp.Name} value={emp.id} />;
 })
}