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

Я хочу создать компонент 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.

Ответы

Ответ 1

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

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

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