如何使用 @react-navigation/native 和 @react-navigation/native-stack 消除导航上的白色闪烁

Question

每当我导航到另一个屏幕时，屏幕都会闪烁白色，因为导航到的屏幕似乎淡入。我将应用程序构建为具有浅色和深色模式；这对于浅色模式来说很好，但在深色模式下，白色闪光很烦人，我不知道如何摆脱它。

我的应用程序.js

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>
  )
}

有人可以建议我如何克服这一挑战或这种导航方法的替代方法吗

Answer 1

首先，您必须导入“@react-navigation/native”并添加到“DefaultTheme”中，如下所示：

import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

在这个

DefaultTheme

里面有一个具有背景颜色

rgb(242, 242, 242)

的数组。这就是您看到的白色闪光。我们会将其设置为其他值。

创建此常量：

const MyTheme = { 
  ...DefaultTheme, 
  colors: {
    ...DefaultTheme.colors, 
    background: '//whatever color you want it to be',
  }
};

然后在

theme

组件上设置

NavigationContainer

属性，如下所示：

<NavigationContainer theme={MyTheme}>
// Your stacks
</NavigationContainer>

这是指导您的文档： https://reactnavigation.org/docs/themes/

Answer 2

我创建了一个类似的项目来测试，这是我想出的解决方案。

尝试使用：

import {createStackNavigator} from '@react-navigation/stack'

而不是：

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

对于你的，我在屏幕之间看到了相同的延迟/白色。当我换成另一个时，我没有看到白屏。我用黄色和黑色背景测试了这个。

我使用

React Native Paper

创建了一个基本的浅色/深色主题，也没有任何问题。

Answer 3

只需在导航过程中删除动画即可。仅此而已！

Answer 4

从“@react-navigation/native”导入 DarkTheme 并将 NavigationContainer 上的 theme 属性设置为 DarkTheme 代码如下

<NavigationContainer theme={DarkTheme}>
<Stack.Navigator>
  <Stack.Screen name="LScreen" component={LScreen} />
  <Stack.Screen name="HScreen" component={HScreen} />
  <Stack.Screen name="CPScreen" component={CPScreen} />
</Stack.Navigator>
</NavigationContainer>

Answer 5

我也遇到了同样的问题，尝试了网上分享的所有可能的解决方案。我解决此问题的唯一方法是向 SafeAreaProvider 提供 背景颜色

<SafeAreaProvider style={{ backgroundColor: <your app's theme color> }}>
    <OtherComponents/>
</SafeAreaProvider>

根据我的观察，此闪光仅在 Stakck 导航器中看到，动画类型为“淡入淡出”，并且是 Android 特定问题。在 iOS 上运行顺利。

使用上述解决方案就可以解决这个问题。