Question

我想通过react-icons包在本机上呈现图标，但是该图标未显示。目前，我的代码如下：

import React from 'react';
import { View, Text } from 'react-native';
import PropTypes from 'prop-types';
import styled from 'styled-components/native';
import * as MaterialDesign from 'react-icons/md';

const StyledTab = styled.View`
 display: flex;
 align-items: center;
 justify-content: center;
`;

const Tab = ({ icon, type, text, color }) => {
 let mdIcon = null;

 if (icon) {
  mdIcon = React.createElement(Text, [], [MaterialDesign[icon]]);
 }
 return (
  <StyledTab icon={icon} type={type} text={text} color={color}>
   {mdIcon}
   <Text>{text}</Text>
  </StyledTab>
 );
};

Tab.propTypes = {
 /** Text of tab */
 text: PropTypes.string,
 /** Text of tab */
 type: PropTypes.oneOf(['default', 'inline', 'icons']),

 color: PropTypes.string,

 icon: PropTypes.string
};

Tab.defaultProps = {
  text: null,
  type: 'default',
  color: '#000',
  icon: null
};

/**
 * @component
*/
export default Tab;

所以这部分：

const Tab = ({ icon, type, text, color }) => {
 let mdIcon = null;

 if (icon) {
  mdIcon = React.createElement(Text, [], [MaterialDesign[icon]]);
 }
 return (
  <StyledTab icon={icon} type={type} text={text} color={color}>
   {mdIcon}
   <Text>{text}</Text>
  </StyledTab>
 );
};

未呈现图标且未显示任何内容。有人可以帮我弄这个吗？我需要以其他方式在本机上呈现此图标吗？

如何在本地渲染反应图标？

0 个答案: