How to use React Native vector icons?

后端 未结 6 1527
感动是毒
感动是毒 2020-12-24 02:54

I have just installed React Native vector icons with this comand:

npm install react-native-vector-icons

But if I use it in the index.androi

相关标签:
6条回答
  • 2020-12-24 03:06

    Here is full UPDATED answer, just follow these steps :-

    1. npm install react-native-vector-icons --save
    2. react-native link
    3. react-native link react-native-vector-icons
    4. import Icon using one of these ( as per your requirement )

      MaterialCommunityIcons

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

      Ionicons

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

      FontAwesome5

      import Icon from 'react-native-vector-icons/FontAwesome5';
      
    5. Uses (JSX)

       <Icon size={24} color="white" name="movie" />
      
    0 讨论(0)
  • 2020-12-24 03:07

    Maybe you are not importing correctly the library, you must specify a family of icons you wanna use.

    I think the name of the icon you are using not correspond with the icon you are searching.

    For example, if you will use material icons, the import will be: import Icon from 'react-native-vector-icons/MaterialIcons';

    And change the name to name={add}

    Try look for other icons family if you don want use material icons.

    0 讨论(0)
  • 2020-12-24 03:07

    I think this may help, at least this is what I have to do every time. In the Project/android/app/build.gradle, add this line:

    apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
    
    0 讨论(0)
  • 2020-12-24 03:17

    First, make sure you're saving the dependency in your project by doing:

    npm install react-native-vector-icons --save. Including the --save is necessary, otherwise react-native link won't be able to locate the module.

    Before you can use them in your iOS or Android project, you also have to link the native modules. The quick way to do this is by using the following command:

    react-native link react-native-vector-icons

    If for any reason you have problems using react-native link to link the native modules, the react-native-vector-icons README also provides detailed instructions for linking them manually on Android and iOS, and integrating the library on the web as well.

    0 讨论(0)
  • 2020-12-24 03:22

    Step 1: Install react-native-element:

    npm install react-native-elements --save
    

    Steps 2: Install react-native-vector-icons Install from npm

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

    Link it

    react-native link react-native-vector-icons
    

    After that you can use it in your page by: Step 1:

    import { Icon } from 'react-native-elements';
    

    Step 2:

    <Icon name="md-beer" type="ionicon" color="#887700" />
    
    0 讨论(0)
  • 2020-12-24 03:31

    You can use :

    icon = {"<"Icon name='lock'/>} 
    

    Or :

    icon = {{ type:'font-awesome',name:'lock'}}
    

    in any React native componant property.

    0 讨论(0)
提交回复
热议问题