Использование response-native-vector-icons / FontAwesome со стилевыми компонентами - PullRequest
Новая
       31

Использование response-native-vector-icons / FontAwesome со стилевыми компонентами

0 голосов
/ 07 октября 2018

Я выполняю рефакторинг некоторого кода React Native для использования styled-components , но возникают проблемы при стилизации значков FontAwesome.Я получаю сообщение об ошибке, например

styledComponents2.default.IconFontAwesome - это не функция

, поэтому я понимаю по этой проблеме GitHub , что мне нужнооберните компонент и передайте className опору в соответствии с документами по расширению пользовательских компонентов .Итак, у меня есть это: 

import React from 'react';
import {
  Text,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
import styled from 'styled-components';

const StyledTouchableOpacity = styled.TouchableOpacity`
  width: ${props => (props.large ? '100%' : '80%')};
  height: ${props => (props.large ? '80px' : '60px')};
  font-size: ${props => (props.large ? '18px' : '15px')};
  background: '#f1d746';
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
`;

const StyledText = styled.Text`
  font-size: 15;
  font-weight: bold;
`;

const StylableIcon = ({ className }) => (
  <IconFontAwesome className={className} />
);

const StyledIconFontAwesome = styled.StylableIcon`
  font-size: 15;
  padding: 10px;
`;

const Button = (props) => {
  let _icon = null;

  if (props.icon) {
    _icon = (
      <StyledIconFontAwesome name={props.icon} />
    );
  }

  return (
    <StyledTouchableOpacity>
      <StyledText>{props.text}</StyledText>
      {_icon}
    </StyledTouchableOpacity>
  );
};

Button.defaultProps = {
  icon: null,
};

Button.propTypes = {
  icon: PropTypes.string,
};

export default Button;

, что приводит к аналогичной ошибке

styledComponents2.default.StylableIcon не является функцией

Любые советы почто я тут не так делаю?Спасибо всем.

1 Ответ

0 голосов
/ 08 октября 2018

ОК, он работает с: 

import React from 'react';
import {
  Text,
  TouchableOpacity,
} from 'react-native';
import PropTypes from 'prop-types';
import IconFontAwesome from 'react-native-vector-icons/FontAwesome';
import styled from 'styled-components';

const StyledTouchableOpacity = styled.TouchableOpacity`
  width: ${props => (props.large ? '100%' : '80%')};
  height: ${props => (props.large ? '80px' : '60px')};
  font-size: ${props => (props.large ? '18px' : '15px')};
  background: '#f1d746';
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
`;

const StyledText = styled.Text`
  font-size: 15;
  font-weight: bold;
`;

const StyledIconFontAwesome = styled(IconFontAwesome)`
  font-size: 15;
  padding: 10px;
`;

const Button = (props) => {
  let _icon = null;

  if (props.icon) {
    _icon = (
      <StyledIconFontAwesome name={props.icon} />
    );
  }

  return (
    <StyledTouchableOpacity>
      <StyledText>{props.text}</StyledText>
      {_icon}
    </StyledTouchableOpacity>
  );
};

Button.defaultProps = {
  icon: null,
};

Button.propTypes = {
  icon: PropTypes.string,
};

export default Button;

Итак, два исправления здесь:

  1. Пришлось использовать синтаксис styled(Something) вместо styled.Something (спасибо @bennygenel)
  2. Оболочка StylableIcon не нужна.Я могу позвонить styled(IconFontAwesome) напрямую.
...