【SwiftUI】NavigationLinkで囲んだ画像・テキストの色が変わってしまう問題について

SwiftUIで画面遷移をおこなうNavigationLinkを使う時、NavigationLinkで囲んだビューの色が塗り潰されてしまう問題に遭遇した。

struct ContentView: View {
    var body: some View {
        NavigationLink(destination: DetailView()) {
            VStack {
                Image("pasta")
                    .resizable()
                    .aspectRatio(contentMode: .fill)
                    .frame(width: 250, height: 250)
                    .clipShape(Circle())
                    .padding()
                Text("カルボナーラ")
            }
        }
    }
}

実はこれはNavigationLinkの仕様で、標準のリンク色にビューを塗り潰すという性質があるようだ。

回避策

ImageとTextで、それぞれ対応が違うのだが、以下の方法で本来の表示に戻すことができる。

Imageビューの場合

renderingModeモディファイアでレンダリングモードを変更することができ、originalを設定すると本来の画像として表示させることができる。

Image("pasta")
    .renderingMode(.original) // 追加
    .resizable()
    .aspectRatio(contentMode: .fill)
    .frame(width: 250, height: 250)
    .clipShape(Circle())
    .padding()

Textビューの場合

Textビューの場合は単純にforegroundColorモディファイアで色を指定すれば良い。

Text("カルボナーラ")
    .foregroundColor(.primary)