如何在React Native Elements Header对象中使用图标？

pieyvz9o 于 6个月前发布在 React

关注(0)|答案(2)|浏览(66)

我经历了所有的设置步骤在https://reactnativeelements.com/docs和我只是试图做一个简单的标题以下their example。
如果我点击“复制代码”按钮在他们的操场上，它给我这个：

import * as React from "react";
import { Header, Icon } from "@rneui/base";
import { SafeAreaProvider } from "react-native-safe-area-context";

export default () => {
  return (
    <Header
      backgroundImageStyle={{}}
      barStyle="default"
      centerComponent={{
        text: "MY TITLE",
        style: { color: "#fff" }
      }}
      centerContainerStyle={{}}
      containerStyle={{ width: 350 }}
      leftComponent={{ icon: "menu", color: "#fff" }}
      leftContainerStyle={{}}
      linearGradientProps={{}}
      placement="center"
      rightComponent={{ icon: "home", color: "#fff" }}
      rightContainerStyle={{}}
      statusBarProps={{}}
    />
  );
}

字符串
当我在我的应用程序中这样做时，它会为图标显示问号：
x1c 0d1x的数据
他们的设置文档确实包括手动链接的这一步骤：
第一个月
我不能这么做，因为react-native不再支持它了。
但我不知道这里出了什么问题任何帮助都将不胜感激。
如果有帮助的话，这些是我的package.json中的依赖项：

"@rneui/base": "^4.0.0-rc.6",
    "@rneui/themed": "^4.0.0-rc.6",
    "react": "18.0.0",
    "react-native": "0.69.4",
    "react-native-asset": "^2.0.1",
    "react-native-gesture-handler": "^2.6.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-safe-area-context": "^4.3.3",
    "react-native-vector-icons": "^9.2.0"

型

react-native

来源：https://stackoverflow.com/questions/73505037/how-do-you-use-icons-in-a-react-native-elements-header-object

2条答案

按热度按时间

cczfrluj1#

对于Android，我只需要按照Github repo上的react-native-vector-icons安装说明进行安装即可（你可能认为这很明显，但react-native-elements的文档只是让你安装一个yarn/npm react-native-vector-icons，并表现出这足以让你启动和运行）。
他们让我把这个添加到android/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

字符串
然后重建应用程序
对于iOS来说，这就更复杂了。你需要使用XCode手动复制字体，然后更新一些文件。说明在上面的链接中。但它们并不太准确，因为它们让你在XCode中的Build Phases > Copy Bundle Resources中添加字体。（在我的情况下，我没有手动添加它们。他们已经在那里。）然而，运行代码给了我一个错误“多个命令产生”这些.ttf文件。
解决方案是返回到构建阶段>复制捆绑包资源，并手动删除那里列出的所有icon .ttf文件，as per this article。
现在一切都正常了，这么复杂真是愚蠢

赞(0）回复(0）举报 6个月前

1zmg4dgp2#

对于IOS，我通过将字体库导入到Info.plist文件来解决这个问题。
对于"react-native": "^0.60.0"项目，链接应该是原子性的，但是如果不是这样，这可能会有所帮助

<key>UIAppFonts</key>
<array>
    <string>AntDesign.ttf</string>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>Feather.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>FontAwesome5_Brands.ttf</string>
    <string>FontAwesome5_Regular.ttf</string>
    <string>FontAwesome5_Solid.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>Zocial.ttf</string>
    <string>Fontisto.ttf</string>
</array>

字符串

赞(0）回复(0）举报 6个月前

我来回答

如何在React Native Elements Header对象中使用图标？

2条答案

相关问题

热门标签

最新问答