Come creare componenti React Native personalizzati con nodi figlio

Question

Desidero creare un componente React Native in puro JavaScript, composto da altri componenti come TouchableOpacity e Text. Nella mia app ho un paio di pulsanti che sono composti da questi due componenti, quindi ho pensato che sarebbe stato bello imparare come creare i miei componenti per un migliore riutilizzo del codice.

Il componente finito dovrebbe apparire più o meno così:

<Button> 
    Tap me! 
</Button> 

E questo è il codice che ho fatto per la componente finora:

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

Comunque, io non so come Posso usare il testo del bambino interno Tap me! nel mio componente e in realtà non capisco come posso fare in modo che il mio componente accetti oggetti di scena personalizzati e gli oggetti di scena TouchableOpacity e Text.

PS: So che ci sono alcuni componenti React Native come questo là fuori, ma preferisco creare il mio per imparare come posso costruire questo tipo di componenti personalizzati. Inoltre, React Native è fantastico ma non riesco a trovare come costruire cose come questa nei loro documenti e penso che sia un esercizio davvero interessante per le persone che iniziano con React.

Answer 1

È possibile accedere al testo interno tramite this.props.children e passare le proprietà manualmente (tramite this.props) o utilizzando l'operatore .... Più di questo è descritto nella documentazione react.js (nota - non React Native docs!). Le parti più significative della documentazione sono:

• http://facebook.github.io/react/docs/multiple-components.html
• https://facebook.github.io/react/docs/components-and-props.html

E 'impostazione generale Reagire documentazione nativa che, piuttosto che descrivere tutti reagiscono concetti, hanno descritto solo il React parti nativi e la il concetto reale è descritto nel web/versione originale di React.

Answer 2

è possibile verifica questo repo da github: https://github.com/future-challenger/react-native-tabs

un certo codice qui:

<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...) è la chiave per affrontare con i componenti bambini.