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

hyrbngr7  于 2023-06-24  发布在  React
关注(0)|答案(4)|浏览(184)

每当我导航到另一个屏幕时,屏幕 Flink 白色,因为导航到的屏幕似乎淡入。我建立了应用程序都有一个光明和黑暗模式;这将是罚款为轻模式,但在黑暗模式的白色闪光是恼人的,我不知道如何就如何摆脱它。
我的App.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>
  )
}

有人能好心地建议我如何克服这个挑战或替代这种导航方法吗

gt0wga4j

gt0wga4j1#

从“@react-navigation/native”导入DarkTheme并将NavigationContainer上的主题 prop 设置为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>
3hvapo4f

3hvapo4f2#

我创建了一个类似的项目进行测试,这是我提出的解决方案。
尝试使用:

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

而不是:

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

与你的,我看到了相同的延迟/屏幕之间的白色。当我换到另一个时,我没有看到白色的屏幕。我用黄色和黑色的背景测试了这个。
我使用React Native Paper创建了一个基本的亮/暗主题,也没有任何问题。

pxiryf3j

pxiryf3j3#

首先,你必须导入'@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',
  }
};

然后在NavigationContainer组件上设置theme属性,如下所示:

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

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

5tmbdcev

5tmbdcev4#

只是在导航过程中删除动画。就这样!

相关问题