React 图标与 React 本机导航不兼容

Question

我想使用 React icons= HiOutlineMenuAlt1 中的这个图标作为本机导航中的抽屉图标。 但是我尝试如下所示使用它会带来错误（见下文）注意：在导航中使用时，所有图标都会出现此错误

最小样本库

import { HiOutlineMenuAlt1} from "react-icons/hi";
<Drawer.Navigator
  screenOptions={({ navigation }) => ({
      headerLeft: () => <HiOutlineMenuAlt1 size={24} color="white" />,
  })
      ....
</Drawer.Navigator>

显示错误

不变违规：查看组件路径的配置 getter 回调必须是 function（收到未定义）。 确保组件名称以大写字母开头。

预期行为

它应该显示一个图标并且不应该显示任何错误

Answer 1

该库与 React Native 不兼容。 尝试使用它，例如https://github.com/oblador/react-native-vector-icons

Answer 2

可能想试试这个：

<Drawer.Navigator
  screenOptions={({ navigation }) => ({
      headerLeft: <HiOutlineMenuAlt1 size={24} color="white" />,
  })
      ....
</Drawer.Navigator>

但我同意其他答案，您通常不想从 web 中获取 fonts 用于移动应用程序。 您希望 fonts 与应用程序一起安装，因此您将其存储在设备本地。