1
votes

Puis-je appeler props.navigation dans les données Flatlist?

J'ai un const déclaré qui a des paramètres passés d'une autre page.

renderText = (itt) => {

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt.name}
        />
      </View>
    )
  }

Maintenant, j'appelle itemArray dans les données Flatlist, voir ci-dessous.

Voici ma Flatlist:

 <FlatList
      key={this.keyExtractor}
      data={itemArray}
      renderItem={({item}) => this.renderText(item)}
    />

Le problème est qu'il n'affiche pas le texte. C'est juste vide.

Voici la méthode de rendu que j'appelle dans Flatlist:

const obj = this.props.navigation.state.params.item;
const itemArray = Object.values(obj.name)

react-native view parameters

3 commentaires

Vous devriez mettre à jour votre question avec plus de détails sur ce que vous passez. À l'heure actuelle, cette question n'est pas claire.

@Andrew pourquoi avez-vous supprimé votre réponse? Cela m'a tellement aidé que j'étais sur le point de le marquer comme une réponse. Je modifierai également ma question.

@Andrew J'ai édité ma question. Vérifiez s'il vous plaît!

4 Réponses :

0
votes

Vous pouvez utiliser directement

<FlatList
      key={this.keyExtractor}
      data={this.props.navigation.state.params.item}
      renderItem={({ iteemm }) => <Text>{iteemm}</Text>}
/>

2 commentaires

C'est un objet donc je ne peux pas. Flatlist n'accepte que les tableaux, c'est le point.

essayez ceci const obj = []; obj.push (this.props.navigation.state.params.item);

1
votes

Vous devriez pouvoir utiliser la FlatList.

Voici comment je l'implémenterais dans la méthode de rendu de votre composant.

Notez que vous n'avez pas besoin d'utiliser this en face de la variable obj .
Vous avez également mal orthographié item dans votre fonction renderItem , ce qui peut vous causer des problèmes si vous ne le corrigez pas.
L'objet que vous passez, pour que ce code spécifique fonctionne, doit être un tableau de chaînes, quelque chose comme ['first', 'second', 'third']
Vous devez également avoir défini une fonction comme un keyExtractor à l'intérieur de votre composant.

keyExtractor = (item, index) => {
  return index.toString();
}

render () {
  const obj = this.props.navigation.state.params.item;
  return (
   <FlatList
     key={this.keyExtractor}
     data={obj}
     renderItem={({ item }) => <Text>{item}</Text>}
   />
  );
}

2 commentaires

Merci beaucoup! Je ne comprends tout simplement pas le keyExtractor, comment dois-je le faire?

Ajout d'un simple extracteur de clés, il devrait répondre à vos besoins

0
votes

essayez ceci

renderText = (itt) => {
    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt}
        />
      </View>
    )
  }

2 commentaires

Je l'ai fait mais il affiche tout ce qui se trouve à l'intérieur de ce tableau.

plz log avant le retour et voir itt.name

1
votes

Puisque FlatList n'accepte pas un objet, vous devez faire une solution de contournement. Vous devez également créer un tableau et y pousser votre objet.

renderText = (itt) => {

    return (
      <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
        <ListItem 
        title={itt.name}
        />
      </View>
    )
  }

et votre méthode de rendu doit rester la même:

const obj = this.props.navigation.state.params.item;
    var propsArray = [];
    const itemArray = Object.assign(obj)
    propsArray.push(itemArray)

    return (
      <View>
        <FlatList
          key={this.keyExtractor}
          data={propsArray}
          renderItem={({ item }) => this.renderText(item)}
        />
      </View>
}

0 commentaires