Question

我在使用两个不同的导航器转换到另一个屏幕时遇到这种情况：前导航和新导航React Navigation 。一秒钟（或半秒钟）会出现白色闪烁。寻找解决方案我发现其他导航器也有同样的问题。例如wix的导航器 HERE。从链接：

好的，问题是，导航后应用了React样式开始，默认情况下backgroundColor是白色的，所以这就是闪烁效应..

有人有同样的问题吗？

Answer 1

我知道我在这里发帖很晚，但是如果有人得到帮助，那就值得了。

我也遇到了同样的问题，因为我的项目使用的是深色主题，每当导航发生时，白屏都会闪烁几毫秒。

我通过向 NavigationContainer 主题道具添加相同的主题背景颜色来解决此问题，如下所示

<NavigationContainer theme ={{colors:{background: /*same background color of your project */}}}> .... </NavigationContainer>

这解决了我的问题，希望它也解决其他人的问题。

谢谢..

Answer 2

我遇到了同样的问题。在我看来，有两个解决方案。

第一个解决方案来自您分享的link。基本上，您可以为Navigator组件添加背景颜色。

我之前应用于我的项目的第二个解决方案不是一个确切的解决方案，而是一个解决方法。我通过将Navigator从SceneConfigs更改为Navigator.SceneConfigs.FloatFromRight来更改Navigator.SceneConfigs.PushFromRight组件转换屏幕来回的方式。所以我的Navigator组件会变成类似的东西;

        <Navigator
            ref={(ref) => this._navigator = ref}
            configureScene={(route) => {
                return {
                    ...Navigator.SceneConfigs.PushFromRight,
                    gestures: {}
                };
            }}
            initialRoute={{
                id: (Platform.OS === "android" || Platform.OS === "ios") ? 'splashscreen' : 'login',
                statusBarHidden: true
            }}
            renderScene={this.renderScene}
        />

Answer 3

您可以在导航器中设置背景颜色，如下所示：

<
Navigator style={{flex: 1}} 
  transitionerStyle={{backgroundColor: 'black'}} ...

希望这有帮助 -

Answer 4

在使用DrawerNavigator和StackNavigator时，需要：

cardStyle: {
    backgroundColor: 'transparent',
},

并且需要：

使用react-native-root-view-background设置RootViewBackgroundColor（'black'）

Answer 5

这对我来说是成功的秘诀：

cardStyle: { opacity: 1 }

Answer 6

我通过在React-Navigation v5的NavigationContainer中设置该属性解决了白色闪烁的问题。

<NavigationContainer theme={{ colors: { background: '#000' } }}>
{...}
</NavigationContainer>

当我更新与背景色黑色相同的颜色时，它帮助我消除了白色闪烁。

https://github.com/software-mansion/react-native-screens/issues/380#issuecomment-748038449

Answer 7

对于使用 expo 的人，您还需要在 app.json 中传递 backgroundColor。因此，您应该将其设置为应用配色方案中的某种深色。

// app.json

{
  "expo": {
    ...
    "backgroundColor": "#1a202c"
  }
}

转换到新屏幕并且背景为深色时会出现白色闪烁？

7 个答案: