Создать Generi c Пользовательский компонент Реагировать - PullRequest
Новая
       41

Создать Generi c Пользовательский компонент Реагировать

0 голосов
/ 21 марта 2020

Это вопрос реагирования, но для реагирования могут применяться аналогичные концепции.

Я хочу создать CustomView в реагировать. Я использую машинопись.

Пока у меня есть: 

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#ffffff',
    borderRadius: 10,
  }
});

type CustomViewProps= {
  width: number,
  height: number,
  marginTop?: string | number,
}

const CustomView = ({ width, height, marginTop }: CustomViewProps) => (
  <View style={[styles.container, { height, width, marginTop }]} />
);

Пока это нормально, потому что используются только 3 реквизита: ширина, высота и marginTop.

Тем не менее, это не может быть повторно использовано и может стать многословным, если мне нужно будет добавить еще много реквизитов.

Итак, вопрос: как я могу заставить CustomView получать любые реквизиты, как мог бы получать нативный компонент View?

Полагаю, мне следует удалить CustomViewProps. Затем я должен заставить реквизиты наследовать от того же типа, что и нативный компонент View. Однако я борюсь с этим.

1 Ответ

1 голос
/ 21 марта 2020

Поскольку вы создаете CustomViewProps, я предполагаю, что вы хотите добавить некоторые специфические c поведения к вашему нативному компоненту выше уже написанных поведений этого компонента.

Давайте создадим пример.

Я хочу создать кнопку с определенными c поведениями, но я хочу, чтобы она в других случаях велась как обычный компонент TouchableOpacity. Например, я хочу добавить состояние «загрузки», которое будет показывать загрузчик внутри, а не его содержимое. Таким образом, логика c такова: создавайте свои собственные реквизиты и объединяйте свои собственные реквизиты со стандартными реквизитами по умолчанию 

import React, { FC, ReactElement } from 'react'
import { ActivityIndicator, TouchableOpacity, TouchableOpacityProps, StyleSheet } from 'react-native'

type MyProps = {
  loading?: boolean
  children: ReactElement
}

const MyButton: FC<MyProps & TouchableOpacityProps> = (props: MyProps & TouchableOpacityProps) => (
  <TouchableOpacity {...props} disabled={props.disabled || props.loading} style={[styles.button, props.style]}>
    {props.loading ? <ActivityIndicator /> : props.children}
  </TouchableOpacity>
)

const styles = StyleSheet.create({
  button: {
    backgroundColor: 'yellow',
    borderColor: 'black',
    borderWidth: 1,
    borderRadius: 10,
    padding: 10
  },
})

export default MyButton

Пропуск loading будет отвечать за оба содержимого кнопки или disabled проп. Компонент TouchableOpacity получит все совместимые опоры (автозаполнение будет включено, потому что вы назначили TouchableOpacityProps). styles.button будет вести себя как стиль по умолчанию, но будет перезаписан, если вы укажете что-то другое в вашей style пропе. Вот и все!

...