使用 react-native-vector-icons 图标未显示在屏幕 android 上

Question

I am using create-react-native-app . I want to use react-native-vector-icons

But its not showing anything on android screen (I am viewing it on expo app)

Here is what I did:

App.js:

       const Courses = TabNavigator({
  ReactCourses: { screen: ReactCourses },
  NativeCourses: { screen: NativeCourses },
}, {
  tabBarOptions: {
    activeTintColor: '#e91e63',
    swipeEnabled: true,
    showIcon:true,
  },
});

ReactCourses.js:

     import Icon from 'react-native-vector-icons/MaterialIcons';
    static navigationOptions = {
    tabBarLabel: 'React Courses',
    tabBarIcon:({ tintColor }) => (
        <Icon
          name={'home'}
          size={26}
          style={[styles.icon, {color: tintColor}]} />
      )

  }

Answer 1

Add the following things in android/app/build.gradle

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

And then execute the command

react-native run-android

Answer 2

When using Create React Native App, it's not possible to use react-native link with native module packages. Because CRNA projects are loaded in the Expo client app, you'll want to follow the relevant documentation to get vector icons working in your project.

Also, make sure that you're using the Expo preset in .babelrc . It should look like the one provided in the template project .

Answer 3

I think what you did is just a half thing, so after running npm install did you link the project with the third party's native code by running react-native link ? if yes, did you rebuild the project by going to android studio and hit play button?if yes then just restart your packager and we are good to go...

Cheers :)