Как набрать Stateless Functional Component, используя styled-component в React-Native с TypeScript? - PullRequest
Новая
       27

Как набрать Stateless Functional Component, используя styled-component в React-Native с TypeScript?

0 голосов
/ 27 апреля 2019

Начиная с одной недели, мы используем React-Native и Typescript ширины стилевого компонента в моем командном проекте.

Я формирую себя и пытаюсь понять, как правильно использовать его с Typescript.

Моя проблема

У меня действительно есть проблема, чтобы понять, как я должен вводить функциональный компонент без состояния с помощью стилизованного метода.

Фактический код

Вот что у меня есть после doc : 

const SFCView: SFC<{}> = (props) => {
  return <View style={props.style} />
}

const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

Моя ошибка

Машинопись говорит мнеэтот стиль реквизита не существует в моем типе SFC<{}>.На самом деле я нигде не определил.

Что я пытался

Я пытался сказать машинописи, что у моего SFC были те реквизиты 

const SFCView: SFC<{style: ViewStyle}> = (props) => {
  return <View style={props.style} />
}

Но когда я использую SFCViewгде-то еще в моей машинописи кода мне говорят, что я должен указать все реквизиты представления.

Кто-нибудь знает, как правильно его набирать?

Ответы [ 2 ]

0 голосов
/ 28 апреля 2019

Вы можете написать style(MyComponent), но для того, чтобы это дало эффект, вам нужно передать опору className, предоставленную styled-components, в последний элемент DOM.

В вашем случае это должно выглядеть примерно так: 

const StyledView = styled(View)`
  width: 100;
  height: 100;
  background-color: green;
`;

const View = ({ className, ... otherPropsYouMightHave }) => (
  // Whatever you have in this component
  <div className={className}>
    // Whatever View needs to render
  </div>
)

Редактировать: Как вы упомянули, react-native требует пропеллер style вместо className

0 голосов
/ 28 апреля 2019

После некоторых исследований я нашел стандарт для сети с className .

Мое лучшее решение на данный момент 

import { SFC } from 'react';
import { StyleProp, ViewStyle } from 'react-native';

interface IProps {
 style?: StyleProp<ViewStyle>
}

const SFCView: SFC<IProps> = (props) => {
  return <View style={props.style} />
}

const StyledSFCView = styled(SFCView)`
  width: 100;
  height: 100;
  background-color: green
`;

Преимущества:

  • Больше нет ошибок о style prop в SFCView.
  • style prop не является обязательным, поэтому у меня нет ошибок при использовании StyledSFCView.

Недостаток:

  • style не является обязательным, и разработчик может определить его, когда они используют StyledSFCView.

Теперь этопоследнее, что я должен уточнить.

...