7

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

好的，问题是，React 样式在导航开始后应用，并且默认背景颜色为白色，所以这是闪烁效果..

有人有同样的问题吗？

4

10 回答 10

11

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

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

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

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

于 2020-12-18T11:39:48.880 回答
3

对我来说，这成功了：

cardStyle: { opacity: 1 }

例子：

const RootNavigator = createStackNavigator({
    Login: { screen: Login },
    Main: { screen: DrawerNavigator }
},
    {
        initialRouteName: 'Login',
        cardStyle: { opacity: 1 } // Prevent white flicker on Android when navigating between screens
    }
);

export default createAppContainer(RootNavigator);
于 2019-03-23T14:06:58.510 回答
1

使用 DrawerNavigator 和 StackNavigator 时，需要：

cardStyle: {
    backgroundColor: 'transparent',
},

并且需要：

使用react-native-root-view-background设置RootViewBackgroundColor('black')

于 2018-12-21T07:47:09.413 回答
1

我知道我在这里发帖的时间很晚，但是是的，如果有人因此得到帮助，那将是值得的。

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

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

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

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

谢谢你..

于 2021-07-09T11:58:36.497 回答
0

您可以像这样在导航器中设置背景颜色： 

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

希望这可以帮助-

于 2017-07-18T11:58:29.883 回答
0

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

// app.json

{
  "expo": {
    ...
    "backgroundColor": "#1a202c"
  }
}
于 2021-06-15T18:54:44.650 回答
0

以上答案都不适合我。对于 iOS，我在 AppDelegate.m 中更改了背景颜色

if (@available(iOS 13.0, *)) {
rootView.backgroundColor = [UIColor blackColor]; ---> changed this
} else {
rootView.backgroundColor = [UIColor blackColor]; ---> and this
}

对于android：（这并不完美，在启动画面后会显示一段时间的黑屏。我的主题很暗，所以很好。）在MainActivity.java中，

@Override
protected void onCreate(Bundle savedInstanceState) {
SplashScreen.show(this, true); ---> added true here
super.onCreate(savedInstanceState);
}

在styles.xml 中，

<style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="windowNoTitle">true</item>
    <item name="android:statusBarColor">@android:color/transparent</item>
    <item name="windowActionBar">false</item>
    <item name="android:windowFullscreen">true</item>
    <item name="android:windowContentOverlay">@null</item>
    <item name="android:backgroundDimEnabled">false</item>
    <item name="android:windowDisablePreview">true</item>
</style>
于 2022-01-14T10:38:34.793 回答
0

我创建了一个cardStyleInterpolator基于 Typescript 的函数，scaleFromAndroid以防止在切换屏幕时出现屏幕周围的空白。

此功能在屏幕之间切换时删除opacity: 0过渡的和结束，并overlayStyle在屏幕的边框上添加一个。

例子：

<Stack.Navigator
  screenOptions={{
    headerShown: false, /* Hide the header */
    cardStyleInterpolator: scaleCenterAndroidInterpolator /* Overrides the default cardStyleInterpolator */
  }}>
  ...
</Stack.Navigator>

    const scaleCenterAndroidInterpolator = ({ 
        current, 
        closing, 
        next 
    }: StackCardInterpolationProps)  => {

        const { add, multiply } = Animated;

        const handleConditionalScale = (
            condition: Animated.AnimatedInterpolation, 
            main: Animated.AnimatedInterpolation, 
            fallback: Animated.AnimatedInterpolation) => (
                add(multiply(condition, main), multiply(condition.interpolate({
                    inputRange: [0, 1],
                    outputRange: [1, 0]
                  }), fallback))
            )

        const progress: Animated.AnimatedAddition = add(current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp'
          }), next ? next.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0, 1],
            extrapolate: 'clamp'
          }) : 0);

        const opacity: Animated.AnimatedInterpolation = progress.interpolate({
            inputRange: [0, 0.75, 0.875, 1, 1.0825, 1.2075, 2],
            outputRange: [0, 0, 1, 1, 1, 1, 1]
        });

        const scale: Animated.AnimatedAddition = handleConditionalScale(closing, current.progress.interpolate({
            inputRange: [0, 1],
            outputRange: [0.925, 1],
            extrapolate: 'clamp'
          }), progress.interpolate({
            inputRange: [0, 1, 2],
            outputRange: [0.85, 1, 1.075]
          }));

        const overlayStyle: { opacity: Animated.AnimatedInterpolation } = {
            opacity: current.progress.interpolate({
                inputRange: [0, 1],
                outputRange: [0, 0.5],
                extrapolate: 'clamp',
            })
        }

        return {
            cardStyle: {
                opacity: opacity,
                transform: [
                    { scale }
                ],
            },
            overlayStyle
        }

    }

于 2021-10-06T07:26:38.123 回答
0

我曾经也有过一样的问题。在我看来，有两种解决方案。

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

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

            <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}
        />
于 2017-02-23T07:10:01.177 回答
0

对我来说，解决方案是设置layout选项。我正在使用wix-react-native-navigation：

    layout: {
      backgroundColor: "#000",
      componentBackgroundColor: "#000",
    },
于 2021-10-18T20:11:10.320 回答