如何消除@react-navigation/native-stack导航时的白色闪烁问题

适配浅色/深色双模式的React Native应用，使用@react-navigation/native与@react-navigation/native-stack实现导航时，页面跳转的淡入加载过程会出现白色闪烁，浅色模式下感知不明显，深色模式下观感很差。
核心实现代码如下：

import React from 'react'
import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'

import LScreen from './src/screens/LScreen'
import HScreen from './src/screens/HScreen'
import CPScreen from './src/screens/CPScreen'

export default function App() {
  const Stack = createNativeStackNavigator()

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="LScreen" component={LScreen} />
        <Stack.Screen name="HScreen" component={HScreen} />
        <Stack.Screen name="CPScreen" component={CPScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

白闪的核心原因是native-stack的转场动画底层默认使用白色作为容器背景，没有跟随系统明暗模式，淡入过程中页面还没完全渲染时就会透出白底。按优先级尝试以下修复即可：

• 全局配置导航主题与页面背景
  首先把createNativeStackNavigator()的调用移到组件外部，避免每次渲染重新创建栈实例引发异常。再通过React Native自带的useColorScheme hook获取当前明暗模式，给导航容器传入对应主题，同时给栈页面统一配置匹配模式的背景色。
  修复后的核心代码：

  import React from 'react'
  import { NavigationContainer, DarkTheme, DefaultTheme } from '@react-navigation/native'
  import { createNativeStackNavigator } from '@react-navigation/native-stack'
  import { useColorScheme } from 'react-native'
  
  import LScreen from './src/screens/LScreen'
  import HScreen from './src/screens/HScreen'
  import CPScreen from './src/screens/CPScreen'
  
  const Stack = createNativeStackNavigator()
  
  export default function App() {
    const colorScheme = useColorScheme()
    const navigationTheme = colorScheme === 'dark' ? DarkTheme : DefaultTheme
    const pageBgColor = colorScheme === 'dark' ? '#000' : '#fff' // 替换为项目实际使用的页面对应模式背景色
  
    return (
      <NavigationContainer theme={navigationTheme}>
        <Stack.Navigator
          screenOptions={{
            contentStyle: { backgroundColor: pageBgColor },
            animation: 'default'
          }}
        >
          <Stack.Screen name="LScreen" component={LScreen} />
          <Stack.Screen name="HScreen" component={HScreen} />
          <Stack.Screen name="CPScreen" component={CPScreen} />
        </Stack.Navigator>
      </NavigationContainer>
    )
  }
  

• 调整栈导航的转场配置
  如果改完背景仍有白闪，在screenOptions里追加两个配置：presentation: 'card'、animationTypeForReplace: 'push'。部分版本的native-stack默认开启了半透明模态转场，会额外渲染一层白色遮罩，手动指定普通卡片模式即可关闭这层遮罩。
• 安卓端额外配置原生窗口背景
  如果白闪仅出现在安卓端，需要修改原生配置：在android/app/src/main/res/values/styles.xml（浅色模式）和android/app/src/main/res/values-night/styles.xml（深色模式）中，给App主题的android:windowBackground属性设置对应模式的背景色，避免原生窗口本身的白底在渲染前透出。

如果以上方案都无法满足需求，可以考虑替换导航实现：

• 替换为@react-navigation/stack：react-navigation官方提供的JS层实现栈导航，转场层样式完全由JS控制，主题适配更灵活，不会出现原生端默认白底问题，仅在复杂页面转场时性能比native-stack稍弱，常规业务场景基本感知不到差异。
• 替换为Wix出品的react-native-navigation：纯原生实现的导航方案，原生端直接支持明暗模式全局配置，转场动画完全可控，没有白闪问题，性能表现最好，缺点是初始化配置、和现有项目路由逻辑的适配成本更高。

内容的提问来源于stack exchange，提问作者coolDog