Comment étendons-nous un composant "form" React Native, le type qui prend l'entrée de l'utilisateur?

Question

Je peux trouver étonnamment peu de documentation, de tutoriels ou d'exemples sur la façon de créer mon propre composant React Native réutilisable basé sur un composant existant.

de ceux que je peux trouver, ne semblent étendre les composants tels que Picker que l'entrée « retour » de l'utilisateur.

Même regarder le code source de Native Base's Picker n'est pas simple. Par exemple, il semble définir le Item Picker dans deux endroits différents. Certains des trucs qui ressemblent à de la colle ou à de la fonte ne sont pas du tout compris, même s'il y en a seulement quelques lignes.

Comment puis-je étendre un composant "entrée", ou où est un exemple que je peux suivre?

Answer 1

Parce que React natif est juste un rendu cible pour React, beaucoup de la documentation de base existe dans le React core library docs. Si vous ne faites que commencer React Native et n'avez pas travaillé avec React sur le web, ces documents sont un bon point de départ.

Voir en particulier: Composition vs Inheritance.

De même, quand googler comment faire quelque chose avec React autochtone qui n'est pas spécifique à la cible de rendu natif, vous êtes souvent mieux de googler pour seulement « réagir ».

Pour répondre à votre question, dans React, la manière typique de l'extension des composants est de les envelopper dans un autre composant:

const EmailInput = props => { 
    return (
    <TextInput 
     keyboardType="email-address" 
     autoCorrect={false} 
     autoCapitalize="none" 
     {...props} 
    /> 
) 
} 

Vous pouvez ensuite utiliser ce composant comme vous le faites TextInput, par exemple

<EmailInput value={this.state.value} /> 

en sidenote, j'ai aussi trouvé difficile d'étendre les composants dans NativeBase, mais ce sont des questions liées à certaines des décisions de conception dans la bibliothèque NativeBase, et non générique réagisse.