vector-icons/FontAwesome5 在 react-native 上显示错误的图标

Question

在 ReactJS 上，我可以使用从该网站获取的名称来显示图标：https://fontawesome.com/icons?d=gallery&q=eye&m=free

如您所见，如果您用眼睛搜索，那里会有很多选项，如果您单击该图标，它会显示您应该使用什么名称来命名该图标。例如：fas fa-eye 将渲染实心眼，far fa-eye 将渲染普通眼。

问题是在 react-native 上我不能这样调用图标名称，它不会接受，所以我只好使用 eye，但这不是我选择的随机眼睛限制了我。所以我想知道是否有任何方法可以像在 ReactJS 中一样选择我想要的图标？这就是我目前在 react-native 上使用 fontawesome 图标的方式：

import FontAwesome from 'react-native-vector-icons/FontAwesome5';

...

return <FontAwesome name={'eye} style={props.customStyle} />

显示的图标出现在网站的列表中，但正如我所说，同名图标不止一个，我希望能够在两者之间进行选择。

Answer 1

您可以尝试使用 IconDefinition 并按名称选择图标。

import { FontAwesomeIcon } from "@fortawesome/react-native-fontawesome";
import { faBookOpen } from "@fortawesome/free-solid-svg-icons";
  
        <FontAwesomeIcon
            icon={faBookOpen}
            size={28}
          />

Answer 2

对于那些正在努力解决这个问题的人，只需将 solid 或 light 标记添加到您的组件中，它就会更改图标，例如：

return <FontAwesome name={'eye'} style={props.customStyle} solid />

vector-icons/FontAwesome5 在 react-native 上显示错误的图标

vector-icons/FontAwesome5 showing wrong icon on react-native

font-awesome

react-native

react-native-vector-icons