简体   繁体   中英

react native vector icons/fontawesome not showing icons in expo cli

I had build the layout using fontawsome icons in snack expo but when run the same project in expo cli the icons are not displayed.It displayed as a cross.App workes perfectly in snack but not in expo cli.I have tried googleing the probelem but the solutions are change files in gradle i dont have a gardle file this is a snack project.Is there any solution any help will be greatfull,Thanks.

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',
  }
);

You also use images replace icons it works fine,

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

If you are using expo managed app just use expo vector icons Expo vector icons

because react native vector icons require linking which is not possible with expo managed apps.

here is an example for expo icons on snack: Snack

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM