使用带有样式组件的 react-native-vector-icons/FontAwesome答案

【问题标题】：Using react-native-vector-icons/FontAwesome with styled-components使用带有样式组件的 react-native-vector-icons/FontAwesome
【发布时间】：2018-10-07 12:50:48
【问题描述】：

我正在重构一些 React Native 代码以使用 styled-components，但在设置 FontAwesome 图标时遇到了问题。我收到一个错误，例如

styledComponents2.default.IconFontAwesome 不是函数

所以我理解每个this GitHub issue 我需要包装组件并将className 道具向下传递per the docs on extending custom components。所以我有这个：

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

关于我在这里做错了什么的任何提示？谢谢大家。

【问题讨论】：

the document link u shared 中有一条说明，如果您使用 react-native，请记住使用 style 而不是 className。您仍在使用类名。你能重新检查一下吗？
我不确定，但styled.StylableIcon 可能需要styled(StylableIcon)

标签： react-native font-awesome styled-components

【解决方案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;

这里有两个修复：

必须使用语法styled(Something) 而不是styled.Something（感谢@bennygenel）
包装器StylableIcon 是不必要的。我可以直接拨打styled(IconFontAwesome)。

【讨论】：