🐥

react-native-elementsでandroidで起動した際に、文字化けが起こる

2024/01/07に公開

Android

こんにちは投資ロウトです。

 背景react-native-elementsでチェックボックスを実装した際に、◻︎の中にバツマークがされるものがandroidだけ表示され、iosでは表示されていない
以下のリンクの画像と同じような事象が発生している。；
https://github.com/react-native-elements/react-native-elements/issues/710

 修正した箇所①android/app/bulid.gradle
以下を一番最後に追加
apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle")
②node_modules/react-native-vector-icons/fonts.gradle
/**
 * Register font asset source folder
 */
android.sourceSets.main.assets.srcDirs += file("$buildDir/intermediates/ReactNativeVectorIcons")

/**
 * Task to copy icon font files
 */
afterEvaluate {
    def config = project.hasProperty("vectoricons") ? project.vectoricons : [];
    def iconFontsDir = config.iconFontsDir ?: "../../node_modules/react-native-vector-icons/Fonts";
    def iconFontNames = config.iconFontNames ?: [ "*.ttf" ];

    def fontCopyTask = tasks.create(
        name: "copyReactNativeVectorIconFonts",
        type: Copy) {
        description = "copy vector icon fonts."
        into "$buildDir/intermediates/ReactNativeVectorIcons/fonts"

        iconFontNames.each { fontName ->
            from(iconFontsDir) {
                include(fontName)
            }
        }
    }

    android.applicationVariants.all { def variant ->
        def targetName = variant.name.capitalize()
        // androidでcheckboxが表示されないため修正 2024/1/8
        def lintVitalAnalyzeTask = tasks.findByName("lintVitalAnalyze${targetName}")
        if (lintVitalAnalyzeTask) {
            lintVitalAnalyzeTask.dependsOn(fontCopyTask)
        }
        // ここまで
        def generateAssetsTask = tasks.findByName("generate${targetName}Assets")
        generateAssetsTask.dependsOn(fontCopyTask)
    }
}


 結論上記の修正を加えたことで、文字化け見たいな表示は改善されました。

ただリリースする際にパッチを当てないといけないので、ちょっと正攻法ではない気がします。
バージョン更新に期待。。。

背景

修正した箇所

結論

Discussion