Question

我已经在点心博览会中使用fontawsome图标构建布局，但是当在expo cli中运行相同项目时，图标不会显示。它显示为十字形。应用在点心中完美运行，但在expo cli中却没有。的探针，但解决方案是gradle中的更改文件，我没有gardle文件，这是一个零食项目。有任何解决方案的任何帮助都将非常有用，谢谢。

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

  {
    Home: {
      screen: FetchNewsApp,
      navigationOptions: {
        tabBarLabel: 'Home',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="home" color={tintColor} size={25} />
        ),
      },
    },

    Explore: {
      screen: ExploreScreenApp,
      navigationOptions: {
        tabBarLabel: 'Explore',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="wpexplorer" color={tintColor} size={25} />
        ),
      },
    },

    Search: {
      screen: SearchScreenApp,
      navigationOptions: {
        tabBarLabel: 'Search',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="search" color={tintColor} size={25} />
        ),
      },
    },

    Settings: {
      screen: SettingScreenApp,
      navigationOptions: {
        tabBarLabel: 'Settings',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="cog" color={tintColor} size={25} />
        ),
      },
    },

    Profile: {
      screen: ProfileScreenApp,
      navigationOptions: {
        tabBarLabel: 'Profile',
        tabBarIcon: ({ tintColor }) => (
          <Icon name="user-circle" color={tintColor} size={25} />
        ),
      },
    },
  },
  {
    initialRouteName: 'Home',
  }
);

Answer 1

您还可以使用图片替换图标正常工作

tabBarIcon: ({ tintColor }) => ( <Image source={require('...')} style={{}}/> )

Answer 2

如果您正在使用博览会管理的应用程序，只需使用博览会矢量图标 Expo vector icons

因为要响应本机矢量图标，需要链接，而这些链接在expo托管应用中是不可能的。

这是小吃博览会图标的示例： Snack

反应原生矢量图标/ fontawesome在expo cli中未显示图标

2 个答案: