[SwiftUI]ButtonやNavigationLinkで囲んだ画像や文字が青色に塗りつぶされてしまったらrenderingModeを指定しよう

SwiftUI以前の開発環境でも同じような現象ありますね。一度や二度首を捻ったこともあるのではないでしょうか?

そう、画像なら、レンダリングモードを指定しないといけないやつですね。


青くなるコード例

NavigationLink(destination: Text("NextView")) {

Image("imageString") // 青く塗りつぶされる
Text("To Next") // 青色文字になる
}

という感じでNavigationLinkで囲むと、それまで通常通り表示されていた画像が青一色に、文字色も青色になってしまいます。

SwiftUIの場合は画像に.renderingMode(.original)を指定すればOKです。

文字も色を指定しましょう。


改善策

NavigationLink(destination: Text("NextView")) {

Image("imageString")
.renderingMode(.original) // templateではなくoriginalを指定
Text("To Next")
.color(.primary) // 好きな色を指定
}

現場からは以上です!