Tworzenie niestandardowych komponentów macierzystych React z węzłami potomnymi

Question

Chcę utworzyć komponent React Native w czystym JavaScript, złożony z innych komponentów, takich jak TouchableOpacity i Text. Mam kilka przycisków w mojej aplikacji, które składają się z dwóch składników, więc pomyślałem, że byłoby miło nauczyć się tworzyć własne komponenty, aby lepiej wykorzystać kod.

Gotowy komponent powinien wyglądać mniej więcej tak:

<Button> 
    Tap me! 
</Button> 

I to jest kod zrobiłem dla komponentu do tej pory:

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

Jednak nie wiem jak Mogę użyć wewnętrznego tekstu podrzędnego Tap me! w moim komponencie i naprawdę nie wiem, jak mogę uczynić mój komponent, aby zaakceptował niestandardowe rekwizyty i rekwizyty TouchableOpacity i Text.

PS: wiem, istnieją pewne React Native komponenty jak to tam, ale wolę tworzyć własne w celu poznania w jaki sposób można budować tego rodzaju elementów niestandardowych. Poza tym React Native jest niesamowity, ale nie mogę znaleźć tego, jak budować takie rzeczy w swoich dokumentach i myślę, że jest to naprawdę interesujące ćwiczenie dla osób rozpoczynających pracę w React.

Answer 1

Możesz uzyskać dostęp do tekstu wewnętrznego za pośrednictwem this.props.children i możesz przekazać właściwości ręcznie (za pomocą this.props) lub używając operatora ... Więcej informacji na ten temat można znaleźć w dokumentacji react.js (uwaga - nie React Native docs!). Najistotniejsze części dokumentacji są:

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

To ogólne podejście React Native dokumentacji zamiast opisywania wszystkich reagowania koncepcje one opisane tylko React części rdzennych i rzeczywista koncepcja jest opisana w internetowej/oryginalnej wersji React.

Answer 2

można kasie to repo od github: https://github.com/future-challenger/react-native-tabs

niektóre kod tutaj:

<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...) jest kluczem do czynienia z dziećmi komponentów.