对样式化组件使用react-native-vector-icons/font awesome

Question

我正在重构一些React Native代码以使用样式化组件，但在设计FontAwesome图标时遇到了问题。我得到一个错误，例如

样式组件2.default.图标字体真棒不是一个函数

所以我理解这个GitHub问题，我需要包装组件并根据扩展自定义组件的文档传递class Nameprop。所以我有这个：

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不是函数

关于我在这里做错了什么，有什么建议吗？谢谢大家。

Answer 1

好的，让它工作：

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。一些（谢谢@bennygenel）
2. 包装StylableIcon是不必要的。我可以直接调用styled（IconFontAwesome）