Resact Native 벡터 아이콘을 사용하는 방법?

Resact Native 벡터 아이콘을 사용하는 방법?

방금 이 기능과 함께 Resact Native 벡터 아이콘을 설치했는데,

npm install react-native-vector-icons

하지만 만약 내가 그것을 인덱스 앤드로이드에 사용한다면.js

<Icon name="ios-add" size={30} color="#4F8EF7" />

나는 아이콘 대신 중앙에 X가 있는 사각형을 받는다.

왜?

편집:

"npm install reactive-native-벡터-icons --save"를 사용하여 설치하려고 하면 다음 오류가 표시됨:

C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons --save

    npm ERR! Windows_NT 10.0.14393
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "react-native-vector-icons" "--save"
    npm ERR! node v6.9.5
    npm ERR! npm  v3.10.10
    npm ERR! path C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7
    npm ERR! code EPERM
    npm ERR! errno -4048
    npm ERR! syscall rename

    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
    npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at Error (native)
    npm ERR!  { Error: EPERM: operation not permitted, rename 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at destStatted (C:\Program Files\nodejs\node_modules\npm\lib\install\action\finalize.js:25:7)
    npm ERR!     at C:\Program Files\nodejs\node_modules\npm\node_modules\graceful-fs\polyfills.js:264:29
    npm ERR!     at FSReqWrap.oncomplete (fs.js:123:15)
    npm ERR!
    npm ERR! Error: EPERM: operation not permitted, rename 'C:\Users\emiliano\Desktop\React Native\AwesomeProject\node_modules\.staging\react-native-vector-icons-73f301e7' -> 'C:\Users\xrobot\Desktop\React Native\AwesomeProject\node_modules\react-native-vector-icons'
    npm ERR!     at Error (native) parent: 'AwesomeProject' }
    npm ERR!
    npm ERR! Please try running this command again as root/Administrator.

    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\xrobot\Desktop\React Native\AwesomeProject\npm-debug.log

    C:\Users\xrobot\Desktop\React Native\AwesomeProject>npm install react-native-vector-icons
    AwesomeProject@0.0.1 C:\Users\xrobot\Desktop\React Native\AwesomeProject
    `-- react-native-vector-icons@4.0.0

편집 2:

C:\Users\xrobot\Desktop\React Native\AwesomeProject>react-native link react-native-vector-icons
rnpm-install info Linking react-native-vector-icons android dependency
rnpm-install info Android module react-native-vector-icons has been successfully linked
rnpm-install info Linking react-native-vector-icons ios dependency
rnpm-install info iOS module react-native-vector-icons has been successfully linked
rnpm-install info Linking assets to ios project
rnpm-install WARN ERRGROUP Group 'Resources' does not exist in your XCode project. We have created it automatically for you.
rnpm-install info Linking assets to android project
rnpm-install info Assets have been successfully linked to your project

편집 3:

물리적 기기에서 앱을 제거한 다음 다시 빌드한다(QMFNP가 말한 대로).이제 됐다

먼저 다음을 수행하여 프로젝트의 종속성을 저장하십시오.

npm install react-native-vector-icons --save...을 포함하여.--save그렇지 않으면 필요함react-native link모듈을 찾을 수 없을 겁니다

iOS나 Android 프로젝트에서 그것들을 사용하기 전에, 당신은 또한 기본 모듈들을 연결해야 한다.이를 위한 빠른 방법은 다음 명령을 사용하는 것이다.

react-native link react-native-vector-icons

어떤 이유로든 다음 작업을 수행하는 데 문제가 있는 경우react-native link기본 모듈을 연결하려면react-native-vector-icons 또한 README는 Android와 iOS에서 수동으로 연결하고 웹 상의 라이브러리를 통합하는 자세한 지침을 제공한다.

다음은 전체 업데이트 답변이며, 다음 단계를 따르십시오.-

1. npm install react-native-vector-icons --save 2. react-native link 3. react-native link react-native-vector-icons 4.수입Icon다음 중 하나를 사용(요건에 따름)

   **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. 사용(JSX)

     <Icon size={24} color="white" name="movie" />

1단계: 반응성 요소 설치:

npm install react-native-elements --save

2단계: reactive-native-벡터-icon 설치 npm에서 설치

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

연결하다

react-native link react-native-vector-icons

그런 다음 페이지에서 1단계:

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

2단계:

<Icon name="md-beer" type="ionicon" color="#887700" />

라이브러리를 올바르게 가져오지 않은 경우 사용할 아이콘 제품군을 지정하십시오.

네가 사용하는 아이콘의 이름이 네가 검색하는 아이콘과 일치하지 않는 것 같아.

예를 들어 재료 아이콘을 사용할 경우 가져오기는 다음과 같다.import Icon from 'react-native-vector-icons/MaterialIcons';

그리고 이름을 다음으로 변경한다.name={add}

재료 아이콘을 사용하려면 다른 아이콘 패밀리를 찾아보십시오.

사용할 수 있는 항목:

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

또는 :

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

모든 반응 기본 구성 요소 속성에.

나는 이것이 도움이 될 것이라고 생각한다, 적어도 이것은 내가 매번 해야 하는 것이다.에서Project/android/app/build.gradle, 다음 행 추가:

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

이 단계 매뉴얼을 따르십시오. https://github.com/oblador/react-native-vector-icons#option-manually-1

이 어떤 사람 cmd과 반응하도록 네이티브 벡터 아이콘 설치하고 모든 수동 단계가 따라오지만 android&gt에 있는 mainApplication.java을 떠나;app>, src>, main>, java>, com>, youApplication>,mainApplication.java 발언 그것을 경우 자동차 linkng 명령을 실행하react-native 링크 react-native-vector-icons //import com.oblado을 도울 수 있습니다.r.벡터콘VectorIconsPackage; // 아직 자동 링크할 수 없는 패키지(예: // package.add(new MyReactNativePackage(); // package.add(new VectorIconsPackage())); 그리고 이 작업을 통해 앱을 재구축하여 총 10시간 이상 내에 확인할 수 있다.

참조URL: https://stackoverflow.com/questions/42420931/how-to-use-react-native-vector-icons