استفاده از Vector Icons در React Native

React Native Vector Icons یکی از محبوب ترین کتابخانه های موجود در GitHub است.این کتابخانه بیش از 3000 آیکون است که همگی رایگان هستند.این آیکون به صورت کامل سفارشی سازی هستند و میتونید اندازه و رنگ رو با توجه به نیازتون تغییرش بدید.در این آموزش متنی نجوه استفاده از کتابخانه Vector Icons در React Native را یاد میگیریم.

لیستی از دسته بندی آیکون های موجود در کتابخانه React Native Vector Icons:

(AntDesign by AntFinance (297 icons
(Entypo by Daniel Bruce (411 icons
(EvilIcons by Alexander Madyankin & Roman Shamin (v1.10.1, 70 icons
(Feather by Cole Bemis & Contributors (v4.7.0, 266 icons
(FontAwesome by Dave Gandy (v4.7.0, 675 icons
FontAwesome 5 by Fonticons, Inc. (v5.3.1, 1341 (free) 3978 (pro) icons
(Foundation by ZURB, Inc. (v3.0, 283 icons
(Ionicons by Ben Sperry (v4.2.4, 696 icons
(MaterialIcons by Google, Inc. (v3.0.1, 932 icons
(MaterialCommunityIcons by MaterialDesignIcons.com (v2.8.94, 2894 icons
(Octicons by Github, Inc. (v8.0.0, 177 icons
(Zocial by Sam Collins (v1.0, 100 icons
(SimpleLineIcons by Sabbir & Contributors (v2.4.1, 189 icons

1.دایرکتوری پروژه رو در command prompt/Terminal باز کنید و دستور زیر رو اجرا کنید

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

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

2.فایل Your_React_Native_Project_Folder -> android -> app -> build.gradle رو باز کنید و کد زیر رو اضافه کنید.

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

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

3.مجددا فایل Your_React_Native_Project_Folder -> android -> app -> build.gradle رو باز کنید و در بلاک dependencies کد زیر رو قرار بدید.

('compile project(':react-native-vector-icons

1	('compile project(':react-native-vector-icons

کد فایل build.gradle بعد از اضافه کردن کدهای بالا

apply plugin: "com.android.application"
 
apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"
 
import com.android.build.OutputFile
 
/**
 * The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets
 * and bundleReleaseJsAndAssets).
 * These basically call `react-native bundle` with the correct arguments during the Android build
 * cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the
 * bundle directly from the development server. Below you can see all the possible configurations
 * and their defaults. If you decide to add a configuration block, make sure to add it before the
 * `apply from: "../../node_modules/react-native/react.gradle"` line.
 *
 * project.ext.react = [
 *   // the name of the generated asset file containing your JS bundle
 *   bundleAssetName: "index.android.bundle",
 *
 *   // the entry file for bundle generation
 *   entryFile: "index.android.js",
 *
 *   // whether to bundle JS and assets in debug mode
 *   bundleInDebug: false,
 *
 *   // whether to bundle JS and assets in release mode
 *   bundleInRelease: true,
 *
 *   // whether to bundle JS and assets in another build variant (if configured).
 *   // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants
 *   // The configuration property can be in the following formats
 *   //         'bundleIn${productFlavor}${buildType}'
 *   //         'bundleIn${buildType}'
 *   // bundleInFreeDebug: true,
 *   // bundleInPaidRelease: true,
 *   // bundleInBeta: true,
 *
 *   // whether to disable dev mode in custom build variants (by default only disabled in release)
 *   // for example: to disable dev mode in the staging build type (if configured)
 *   devDisabledInStaging: true,
 *   // The configuration property can be in the following formats
 *   //         'devDisabledIn${productFlavor}${buildType}'
 *   //         'devDisabledIn${buildType}'
 *
 *   // the root of your project, i.e. where "package.json" lives
 *   root: "../../",
 *
 *   // where to put the JS bundle asset in debug mode
 *   jsBundleDirDebug: "$buildDir/intermediates/assets/debug",
 *
 *   // where to put the JS bundle asset in release mode
 *   jsBundleDirRelease: "$buildDir/intermediates/assets/release",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in debug mode
 *   resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",
 *
 *   // where to put drawable resources / React Native assets, e.g. the ones you use via
 *   // require('./image.png')), in release mode
 *   resourcesDirRelease: "$buildDir/intermediates/res/merged/release",
 *
 *   // by default the gradle tasks are skipped if none of the JS files or assets change; this means
 *   // that we don't look at files in android/ or ios/ to determine whether the tasks are up to
 *   // date; if you have any other folders that you want to ignore for performance reasons (gradle
 *   // indexes the entire tree), add them here. Alternatively, if you have JS files in android/
 *   // for example, you might want to remove it from here.
 *   inputExcludes: ["android/**", "ios/**"],
 *
 *   // override which node gets called and with what additional arguments
 *   nodeExecutableAndArgs: ["node"],
 *
 *   // supply additional arguments to the packager
 *   extraPackagerArgs: []
 * ]
 */
 
project.ext.react = [
    entryFile: "index.js"
]
 
apply from: "../../node_modules/react-native/react.gradle"
 
/**
 * Set this to true to create two separate APKs instead of one:
 *   - An APK that only works on ARM devices
 *   - An APK that only works on x86 devices
 * The advantage is the size of the APK is reduced by about 4MB.
 * Upload all the APKs to the Play Store and people will download
 * the correct one based on the CPU architecture of their device.
 */
def enableSeparateBuildPerCPUArchitecture = false
 
/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = false
 
android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion
 
    defaultConfig {
        applicationId "com.project"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        ndk {
            abiFilters "armeabi-v7a", "x86"
        }
    }
    splits {
        abi {
            reset()
            enable enableSeparateBuildPerCPUArchitecture
            universalApk false  // If true, also generate a universal APK
            include "armeabi-v7a", "x86"
        }
    }
    buildTypes {
        release {
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }
    // applicationVariants are e.g. debug, release
    applicationVariants.all { variant ->
        variant.outputs.each { output ->
            // For each separate APK per architecture, set a unique version code as described here:
            // http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits
            def versionCodes = ["armeabi-v7a":1, "x86":2]
            def abi = output.getFilter(OutputFile.ABI)
            if (abi != null) {  // null for the universal-debug, universal-release variants
                output.versionCodeOverride =
                        versionCodes.get(abi) * 1048576 + defaultConfig.versionCode
            }
        }
    }
}
 
dependencies {
    implementation fileTree(dir: "libs", include: ["*.jar"])
    implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"
    implementation "com.facebook.react:react-native:+"  // From node_modules
 
 compile project(':react-native-vector-icons')
 
}
 
// Run this once to be able to run the application with BUCK
// puts all compile dependencies into folder libs for BUCK to use
task copyDownloadableDepsToLibs(type: Copy) {
    from configurations.compile
    into 'libs'
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

apply plugin: "com.android.application"

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

import com.android.build.OutputFile

/**

* The react.gradle file registers a task for each build variant (e.g. bundleDebugJsAndAssets

* and bundleReleaseJsAndAssets).

* These basically call `react-native bundle` with the correct arguments during the Android build

* cycle. By default, bundleDebugJsAndAssets is skipped, as in debug/dev mode we prefer to load the

* bundle directly from the development server. Below you can see all the possible configurations

* and their defaults. If you decide to add a configuration block, make sure to add it before the

* `apply from: "../../node_modules/react-native/react.gradle"` line.

* project.ext.react = [

* // the name of the generated asset file containing your JS bundle

* bundleAssetName: "index.android.bundle",

* // the entry file for bundle generation

* entryFile: "index.android.js",

* // whether to bundle JS and assets in debug mode

* bundleInDebug: false,

* // whether to bundle JS and assets in release mode

* bundleInRelease: true,

* // whether to bundle JS and assets in another build variant (if configured).

* // See http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Build-Variants

* // The configuration property can be in the following formats

* // 'bundleIn${productFlavor}${buildType}'

* // 'bundleIn${buildType}'

* // bundleInFreeDebug: true,

* // bundleInPaidRelease: true,

* // bundleInBeta: true,

* // whether to disable dev mode in custom build variants (by default only disabled in release)

* // for example: to disable dev mode in the staging build type (if configured)

* devDisabledInStaging: true,

* // The configuration property can be in the following formats

* // 'devDisabledIn${productFlavor}${buildType}'

* // 'devDisabledIn${buildType}'

* // the root of your project, i.e. where "package.json" lives

* root: "../../",

* // where to put the JS bundle asset in debug mode

* jsBundleDirDebug: "$buildDir/intermediates/assets/debug",

* // where to put the JS bundle asset in release mode

* jsBundleDirRelease: "$buildDir/intermediates/assets/release",

* // where to put drawable resources / React Native assets, e.g. the ones you use via

* // require('./image.png')), in debug mode

* resourcesDirDebug: "$buildDir/intermediates/res/merged/debug",

* // where to put drawable resources / React Native assets, e.g. the ones you use via

* // require('./image.png')), in release mode

* resourcesDirRelease: "$buildDir/intermediates/res/merged/release",

* // by default the gradle tasks are skipped if none of the JS files or assets change; this means

* // that we don't look at files in android/ or ios/ to determine whether the tasks are up to

* // date; if you have any other folders that you want to ignore for performance reasons (gradle

* // indexes the entire tree), add them here. Alternatively, if you have JS files in android/

* // for example, you might want to remove it from here.

* inputExcludes: ["android/**", "ios/**"],

* // override which node gets called and with what additional arguments

* nodeExecutableAndArgs: ["node"],

* // supply additional arguments to the packager

* extraPackagerArgs: []

* ]

project.ext.react = [

entryFile: "index.js"

]

apply from: "../../node_modules/react-native/react.gradle"

/**

* Set this to true to create two separate APKs instead of one:

* - An APK that only works on ARM devices

* - An APK that only works on x86 devices

* The advantage is the size of the APK is reduced by about 4MB.

* Upload all the APKs to the Play Store and people will download

* the correct one based on the CPU architecture of their device.

def enableSeparateBuildPerCPUArchitecture = false

/**

* Run Proguard to shrink the Java bytecode in release builds.

def enableProguardInReleaseBuilds = false

android {

compileSdkVersion rootProject.ext.compileSdkVersion

buildToolsVersion rootProject.ext.buildToolsVersion

defaultConfig {

applicationId "com.project"

minSdkVersion rootProject.ext.minSdkVersion

targetSdkVersion rootProject.ext.targetSdkVersion

versionCode 1

versionName "1.0"

ndk {

abiFilters "armeabi-v7a", "x86"

}

splits {

abi {

reset()

enable enableSeparateBuildPerCPUArchitecture

universalApk false // If true, also generate a universal APK

include "armeabi-v7a", "x86"

}

buildTypes {

release {

minifyEnabled enableProguardInReleaseBuilds

proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"

}

// applicationVariants are e.g. debug, release

applicationVariants.all { variant ->

variant.outputs.each { output ->

// For each separate APK per architecture, set a unique version code as described here:

// http://tools.android.com/tech-docs/new-build-system/user-guide/apk-splits

def versionCodes = ["armeabi-v7a":1, "x86":2]

def abi = output.getFilter(OutputFile.ABI)

if (abi != null) { // null for the universal-debug, universal-release variants

output.versionCodeOverride =

versionCodes.get(abi) * 1048576 + defaultConfig.versionCode

}

dependencies {

implementation fileTree(dir: "libs", include: ["*.jar"])

implementation "com.android.support:appcompat-v7:${rootProject.ext.supportLibVersion}"

implementation "com.facebook.react:react-native:+" // From node_modules

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

}

// Run this once to be able to run the application with BUCK

// puts all compile dependencies into folder libs for BUCK to use

task copyDownloadableDepsToLibs(type: Copy) {

from configurations.compile

into 'libs'

}

4.فایل Your_React_Native_Project_Folder -> android -> settings.gradle رو باز کنید و کدهای زیر رو اضافه کنید.

ProgressBar در react native

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

include ':react-native-vector-icons'

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

5.فایل Your_React_Native_Project_Folder -> android -> app -> src -> main -> java-> com-> YourProjectName -> MainApplication.java رو باز کنید و پکیج vector icons رو با استفاده از کد زیر ایمپورت کنید.

import com.oblador.vectoricons.VectorIconsPackage;

1	import com.oblador.vectoricons.VectorIconsPackage;

6.مجددا فایل Your_React_Native_Project_Folder -> android -> app -> src -> main -> java-> com-> YourProjectName -> MainApplication.java رو باز کنید و پکیج react native vector icons رو درون بلاک ()return Arrays.<ReactPackage>asList فراخوانی کنید.

new VectorIconsPackage()

1	new VectorIconsPackage()

کد کامل MainApplication.java

package com.project;
 
import android.app.Application;
 
import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;
 
import com.oblador.vectoricons.VectorIconsPackage;
 
import java.util.Arrays;
import java.util.List;
 
public class MainApplication extends Application implements ReactApplication {
 
  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }
 
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage(),
   
   new VectorIconsPackage()
   
      );
    }
 
    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };
 
  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }
 
  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

package com.project;

import android.app.Application;

import com.facebook.react.ReactApplication;

import com.facebook.react.ReactNativeHost;

import com.facebook.react.ReactPackage;

import com.facebook.react.shell.MainReactPackage;

import com.facebook.soloader.SoLoader;

import com.oblador.vectoricons.VectorIconsPackage;

import java.util.Arrays;

import java.util.List;

public class MainApplication extends Application implements ReactApplication {

private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {

@Override

public boolean getUseDeveloperSupport() {

return BuildConfig.DEBUG;

}

@Override

protected List<ReactPackage> getPackages() {

return Arrays.<ReactPackage>asList(

new MainReactPackage(),

new VectorIconsPackage()

);

}

@Override

protected String getJSMainModuleName() {

return "index";

}

};

@Override

public ReactNativeHost getReactNativeHost() {

return mReactNativeHost;

}

@Override

public void onCreate() {

super.onCreate();

SoLoader.init(this, /* native exopackage */ false);

}

7.در آخرین مرحله دایرکتوری پروژه رو در ommand prompt/Terminal باز کنید و دستور زیر رو اجرا کنید.

react-native link

1	react-native link

مطالب زیر را حتما مطالعه کنید

1 دیدگاه

به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.

سعید گفت:

نوامبر 26, 2018 در 2:38 ب.ظ

سلام دستور npm install react-native-vector-icons –save را که اجرا می کنم با خطای زیر مواجه میشم لطفا راهنمایی کنید

npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config –get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:289:12)
npm WARN addRemoteGit at ChildProcess.emit (events.js:182:13)
npm WARN addRemoteGit at maybeClose (internal/child_process.js:962:16)
npm WARN addRemoteGit at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
npm WARN addRemoteGit expo/react-native-maps#v0.22.0-exp.0 resetting remote C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\git-github-com-expo-react-native-maps-git-v0-22-0-exp-0-36177bee because of error: { Error: Command failed: git -c core.longpaths=true config –get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:289:12)
npm WARN addRemoteGit at ChildProcess.emit (events.js:182:13)
npm WARN addRemoteGit at maybeClose (internal/child_process.js:962:16)
npm WARN addRemoteGit at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
npm WARN addRemoteGit killed: false,
npm WARN addRemoteGit code: 1,
npm WARN addRemoteGit signal: null,
npm WARN addRemoteGit cmd: ‘git -c core.longpaths=true config –get remote.origin.url’ }
npm ERR! git clone –template=C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git://github.com/expo/react-native-maps.git C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\git-github-com-expo-react-native-maps-git-v0-22-0-exp-0-36177bee: Cloning into bare repository ‘C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\git-github-com-expo-react-native-maps-git-v0-22-0-exp-0-36177bee’…
npm ERR! git clone –template=C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\_templates –mirror git://github.com/expo/react-native-maps.git C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\git-github-com-expo-react-native-maps-git-v0-22-0-exp-0-36177bee: fatal: unable to look up github.com (port 9418) (Either the application has not called WSAStartup, or WSAStartup failed. )
npm WARN addRemoteGit Error: Command failed: git -c core.longpaths=true config –get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:289:12)
npm WARN addRemoteGit at ChildProcess.emit (events.js:182:13)
npm WARN addRemoteGit at maybeClose (internal/child_process.js:962:16)
npm WARN addRemoteGit at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
npm WARN addRemoteGit expo/react-native-maps#v0.22.0-exp.0 resetting remote C:\Users\93110\AppData\Roaming\npm-cache\_git-remotes\git-https-github-com-expo-react-native-maps-git-v0-22-0-exp-0-14459587 because of error: { Error: Command failed: git -c core.longpaths=true config –get remote.origin.url
npm WARN addRemoteGit
npm WARN addRemoteGit at ChildProcess.exithandler (child_process.js:289:12)
npm WARN addRemoteGit at ChildProcess.emit (events.js:182:13)
npm WARN addRemoteGit at maybeClose (internal/child_process.js:962:16)
npm WARN addRemoteGit at Process.ChildProcess._handle.onexit (internal/child_process.js:251:5)
npm WARN addRemoteGit killed: false,
npm WARN addRemoteGit code: 1,
npm WARN addRemoteGit signal: null,
npm WARN addRemoteGit cmd: ‘git -c core.longpaths=true config –get remote.origin.url’ }

پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

1 دیدگاه

دیدگاهتان را بنویسید لغو پاسخ