web-dev-qa-db-fra.com

Comment créer un React composants natifs personnalisés avec des nœuds enfants)

Je veux créer un composant React Native en JavaScript pur, composé d'autres composants tels que TouchableOpacity et Text. J'ai quelques boutons dans mon application qui sont composés de ces deux composants, j'ai donc pensé que ce serait bien d'apprendre à créer mes propres composants pour une meilleure réutilisation du code.

Le composant fini devrait ressembler plus ou moins à ceci:

<Button>
  Tap me!
</Button>

Et voici le code que j'ai fait pour le composant jusqu'à présent:

class Button extends Component {
  render () {
    <TouchableOpacity style={styles.button}>
      <Text style={styles.textButton}>
      </Text>
    </TouchableOpacity>
  }
};

Cependant, je ne sais pas comment utiliser le Tap me! le texte enfant interne dans mon composant et je ne sais pas vraiment comment faire en sorte que mon composant accepte les accessoires personnalisés et les accessoires TouchableOpacity et Text.

PS: Je sais qu'il y a des React composants natifs comme celui-ci, mais je préfère créer les miens afin d'apprendre comment je peux construire ce type de custom) En outre, React Native est génial mais je ne trouve pas comment construire des choses comme ça dans leurs documents et je pense que c'est un exercice vraiment intéressant pour les gens qui commencent dans React.

reactjsecmascript-6react-native
11
amb

Vous pouvez accéder au texte interne via this.props.children et vous pouvez transmettre les propriétés manuellement (via this.props) ou en utilisant l'opérateur ... Plus d'informations à ce sujet sont décrites dans la documentation react.js (note - not React Native docs!). Les parties les plus pertinentes de la documentation sont:

C'est une approche générale de React Documentation native qui plutôt que de décrire tous les concepts React, ils ont décrit uniquement les parties React Native et le concept réel est décrit dans le web/version originale de React.

20
Jarek Potiuk

vous pouvez vérifier ce dépôt sur github: https://github.com/future-challenger/react-native-tabs

du code ici:

<View style={[styles.tabbarView, this.props.style, this.state.keyboardUp && styles.hidden]}>
    {React.Children.map(this.props.children.filter(c=>c),(el)=>
    <TouchableOpacity key={el.props.name + "touch"}
        testID={el.props.testID}
        style={[styles.iconView, this.props.iconStyle, (el.props.name || el.key) == selected ? this.props.selectedIconStyle || el.props.selectedIconStyle || {} : {} ]}
        onPress={()=>!self.props.locked && self.onSelect(el)}
        onLongPress={()=>self.onSelect(el)}
        activeOpacity={el.props.pressOpacity}>
            {selected == (el.props.name || el.key) ? React.cloneElement(el, {selected: true, style: [el.props.style, this.props.selectedStyle, el.props.selectedStyle]}) : el}
    </TouchableOpacity>
)}

React.Children.map(this.props.children.filter...) est la clé pour gérer les composants enfants.

1
Bruce Lee