React Native

react-native-vector-icons link 錯誤

2017/11/13

最近因為工作需要，開始練習用 React Native 製作一些 App，因為實在是很菜，所以常常會碰到一些問題，有時間就整理上來，讓跟我一樣菜的新手可以節省一點時間！

當我每次需要安裝一些有原生依賴的 Component 時，執行完 react-native link 後再 run-android 都會有編譯錯誤，像是：


error: package com.oblador.vectoricons does not exist import com.oblador.vectoricons.VectorIconsPackage;

# 或是

Native module XXXXXX tried to override XXXXXX for module name XXXXXX. if this was your intention, set canOverrideExsitingModule=true

後來發現每次下 react-native link 的時候會重複寫入或是沒有正確寫入相關檔案，所以要確定這三個檔案有正確的寫入，且不能重複，


android/settings.gradle
android/app/build.gradle
android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java

這邊可以參考一下 react-native-linear-gradient 的說明：


# 檔案位置：android/settings.gradle
include ':react-native-linear-gradient'
project(':react-native-linear-gradient').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-linear-gradient/android')

# 檔案位置：android/app/build.gradle
dependencies {
    ...
    compile project(':react-native-linear-gradient')
}

# 檔案位置：android/src/main/java/com/{YOUR_APP_NAME}/MainActivity.java

//...
import com.BV.LinearGradient.LinearGradientPackage; // <--- This!
//...
@Override
protected List getPackages() {
    return Arrays.asList(
        new MainReactPackage(),
        new LinearGradientPackage() // <---- and This!
    );
}

可以參考以下：

https://reactnative.cn/docs/0.50/linking-libraries-ios.html#content

https://stackoverflow.com/questions/41846452/how-to-set-canoverrideexistingmodule-true

https://github.com/react-native-community/react-native-linear-gradient