React 本机矢量图标不会在 android 设备中显示

Question

I used react-native-vector-icons in my react native project and start app with npm start .

Icons are displaying normally in iOS, but won't show in android.

Things I tried:

• three method in the doc of react-native-vector-icons (finally I can see *.tff files in the fonts folder)
• use react-native run-android to start app. Icon shows normal but what I want is integrating react native with my existing android app, not a totally RN app.
• use jsbundle file instead of debug server in my app

None of above works

So, should I add something to my existing android app?

I don't know how to solve this problem

---

react@15.2.0

react-native@0.30.0

react-native-vector-icons@2.0.3

node v5.10.1

npm v3.8.3

Answer 1

Open android/app/build.gradle and add the following:

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

You can follow the instructions to properly install the module on Android: react-native-vector-icons#install-android

Answer 2

I fixed it this by executing:

react-native link
react-native run-android

Answer 3

Open terminal on same project path :

react-native link react-native-vector-icons 
react-native run-android 

Answer 4

Edit android/app/build.gradle

Just add in dependencies

implementation project(':react-native-vector-icons')

Below lines of code are optional if you are using RN >0.60

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

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

Edit android/settings.gradle to look like this:

rootProject.name = 'MyApp'

include ':app'

// Add these two lines
include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

references: https://github.com/oblador/react-native-vector-icons

Answer 5

After doing the below-Mentioned steps, working Fine.

Before, make sure these steps.

Install package:

 yarn add react-native-vector-icons

Import: import Ionicons from 'react-native-vector-icons/Ionicons';

Example code:

return (
      <View style={styles.buttonCircle}>
        <Ionicons
          testID="nextButton"
          name="arrow-forward"
          color="rgba(255, 255, 255, .9)"
          size={24}
          style={{backgroundColor: 'transparent'}}
        />
      </View>
    );

Open android/app/build.gradle and Add below mentioned line after the react.gradle .

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

Open android/settings.gradle Add below Mentioned line.

// Add these two lines

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

You Stop the Development server and Rerun the App react-native run-android

I Hope, It's helpful.

Answer 6

I've same issue and than I solved this, let's try :

1. Open android/app/build.gradle ( NOT android/build.gradle )
2. add the following: apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
3. After that you must stop the Dev, and Restart/Run it again( npm run android )

Hopefully this will help you :D

Answer 7

In :-   android/app/build.gradle

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

and setting.gradle file add this 

include ':react-native-vector-icons'
project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

Answer 8

I had everything configured as mentioned in other answers but still running react-native run-android i keep seeing the app without the icons!

Simply i did:

cd android && ./gradlew clean

then another

react-native run-android

And it worked yaay!

Answer 9

Open android/app/bundle.gradle

Answer 10

I am having the same issue and I fixed it this by executing:

npx react-native link react-native-vector-icons npx react-native run-android

Answer 11

when importing the Icon it show something like that.

To fix this run,

npx react-native link && npx react-native run android

After the command execution

Answer 12

Follow the official recommandations ( https://github.com/oblador/react-native-vector-icons#android ) to have this module loads when creating the bundle :

Edit android/app/build.gradle ( NOT android/build.gradle ) and add the following:

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

Answer 13

This may have several possible answers:

1- maybe the icon that you use is just for ios ...try to see other logo packs in link below: https://oblador.github.io/react-native-vector-icons

2- maybe you import the wrong link for using the package at the top of your code where you import this vector icon, import exact link for example:

this is wrong: import Icon from "react-native-vector-icons and this is true: "import Icon from "react-native-vector-icons/MaterialIcons";"

Answer 14

I followed every solution but nothing worked

1. Link command (Link not supported)
2. asset command (config file not exists)

Both didn't worked but at last solution that works is Adding following lines in build.gradle file

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

Paht of the file is android/app/build.gradle

NOTE:- please use npx react-native run-android command again to see changes

Answer 15

In my case auto linking was failing. I resolved it by copying Fonts folder from react-native-vector-icons inside node_modules to src/main/assets/fonts.

Answer 16

simplely npm unlink react-native-vector-icons ,and then npm link react-native-vector-icons . (if your ReactNative version is below 0.60)

Answer 17

In Android platform icon showed me like this:

enter image description here

after some time of troubleshouting I finally find out solution.

Beacouse of I use my own icon set I created iconSet.ttf from iconSet.svg by IcoMoon App.

In fact I followed this tutorial: https://medium.com/bam-tech/add-custom-icons-to-your-react-native-application-f039c244386c

IcoMoon App created *.ttf and selection.json and problem was in selection.json.

I renamed *.ttf file to myIcons.ttf but I had to change fontFamily and name in the end of file selection.json to same name like I named *.ttf file. In my case myIcons.ttf I renamed name and fontFamily to myIcons in selection.json

Answer 18

You can use icons as SVG just by using selection.json file. The Developer Experience is very high and requires very little effort.

I hope this module makes your work easier when working with icons.

react-icomoon

Answer 19

npm install react-native-vector-icons@9.2.0 --save

This version worked for me !

Answer 20

After adding the font names to my android/app/build.gradle it is fixed.

project.ext.vectoricons = [
    iconFontNames: [ 'Feather.ttf',"FontAwesome.ttf" ] // Name of the font files you want to copy
]