Как создать пользовательский React Нативные компоненты с дочерними узлами

Question

Я хочу создать компонент React Native в чистом JavaScript, состоящий из других компонентов, таких как TouchableOpacity и Text. У меня есть несколько кнопок в моем приложении, которые состоят из двух компонентов, поэтому я подумал, что было бы неплохо узнать, как создавать собственные компоненты для лучшего повторного использования кода.

Законченный компонент должен выглядеть примерно так:

<Button> 
    Tap me! 
</Button> 

И это код, который я сделал для компонента до сих пор:

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

Однако, я не знаю, как Я могу использовать внутренний текст дочернего текста Tap me! в своем компоненте, и я действительно не понимаю, как я могу заставить свой компонент принять пользовательские реквизиты и реквизиты TouchableOpacity и Text.

PS: Я знаю, что есть некоторые компоненты React Native, такие как это, но я предпочитаю создавать свои собственные, чтобы узнать, как я могу создавать такие пользовательские компоненты. Кроме того, React Native является удивительным, но я не могу найти, как создавать такие вещи в своих документах, и я думаю, что это действительно интересное упражнение для людей, начинающих в React.

Answer 1

Вы можете получить доступ к внутреннему тексту через this.props.children, и вы можете передавать свойства либо вручную (через this.props), либо используя ... оператора. Подробнее об этом описано в документации react.js (note - not React Native docs!). Наиболее важные части документаций являются:

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

Это общий подход Реагировать Native документации, а не описание всех среагировать концепции, они описаны лишь Реагировать Native часть и фактическая концепция описана в Интернете/оригинальной версии React.

Answer 2

вы можете оформить этот репозиторий из GitHub: https://github.com/future-challenger/react-native-tabs

некоторый код здесь:

<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...) является ключом для работы с детьми компонентов.