最近因為工作需要,開始練習用 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