切换屏幕时白色背景闪烁 - React-Navigation v5

Question

我正在将 RN 项目版本 4 迁移到 5。

切换屏幕时出现白色背景闪烁的问题。在 v4 中，通过cardStyle: { backgroundColor: material.containerBgColor }在StackNavigation选项中设置解决了这个问题。

但是在 v5 中，我无法使用相同的方法修复它：

<Stack.Navigator cardStyle={{ backgroundColor: material.containerBgColor }} ...>

白光又回来了。知道如何修复它吗？谢谢。

更新：导航的结构可能很重要：

const AppTabNavigator = () => (
  <Tab.Navigator>
    <Tab.Screen name="Home" component={Home} />
    <Stack.Screen name="ScreenD" component={ScreenD} />
    <Stack.Screen name="ScreenE" component={ScreenE} />
    <Stack.Screen name="ScreenF" component={ScreenF} />
  </Tab.Navigator>
)
...
  <Stack.Navigator
    ...
    cardStyle={{ backgroundColor: material.containerBgColor }}
  >
    <Stack.Screen name="Home" component={AppTabNavigator} />
    <Stack.Screen name="ScreenA" component={ScreenA} />
    <Stack.Screen name="ScreenB" component={ScreenB} />
    <Stack.Screen name="ScreenC" component={ScreenC} />
  </Stack.Navigator>

从 ScreenD 到 ScreenE 会出现闪烁问题。我不确定其他屏幕，因为它们不发出任何网络请求/异步内容。

Answer 1

我遇到了同样的问题并投入了调查。似乎是屏幕的分离导致它。我找到了一些方法。您可以根据自己的需要选择一种。它们如下：

1. 您可以指定与屏幕背景颜色相同的导航器的视图包装器，例如：

   <View style={{ flex: 1, backgroundColor: '#YOUR_SCREEN_COLOR' }}>
     // It could be your NavigationContainer or your StackNavigator depends on your goals 
     <Navigator /> 
   </View>
   

2. 您还可以modal在堆栈视图配置中指定您的屏幕模式，以防止屏幕被分离，例如：

   <StackNavigator.Navigator mode="modal">
     {/*.... Your stack screens ... */}
   </StackNavigator.Navigator>
   

3. 您可以screenOptions使用cardOverlay道具添加自定义叠加层：

   cardOverlay: () => (
     <View
       style={{
       flex: 1,
       backgroundColor: '#YOUR_COLOR',
     }}
   />)
   

   参考：https : //reactnavigation.org/docs/stack-navigator/#cardoverlay

4. 您可以使用cardStyleInterpolator：

   这允许您在从屏幕导航到屏幕时自定义动画过渡。

   以下是原始文档的片段：

   const forFade = ({ current, closing }) => ({
     cardStyle: {
       opacity: current.progress,
     },
   });
   

   <Stack.Screen
     name="Profile"
     component={Profile}
     options={{ cardStyleInterpolator: forFade }}
   />
   

   Stack Navigator 公开了各种选项，用于在添加或删除屏幕时配置过渡动画。

   参考：https : //reactnavigation.org/docs/stack-navigator/#animation-related-options

Answer 2

我也在 v5 中使用 StackNavigator，但没有一个答案对我有用。这就是我解决问题的方法：

const navigatorOptions = {
  headerShown: false,
  cardStyle: { backgroundColor: 'transparent' },
  cardStyleInterpolator: ({ current: { progress } }) => ({
    cardStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 1],
      }),
    },
    overlayStyle: {
      opacity: progress.interpolate({
        inputRange: [0, 1],
        outputRange: [0, 0.5],
        extrapolate: 'clamp',
      }),
    },
  }),
}
 
...

<AppStack.Navigator
  screenOptions={navigatorOptions}
  mode="modal"
>
...

我在这里找到了解决方案：https : //reactnavigation.org/docs/stack-navigator#transparent-modals

Answer 3

这个对我有用的问题的简单解决方法是sceneContainerStyle在 Tab Navigator 中像这样设置：

<Tab.Navigator sceneContainerStyle={{backgroundColor: 'black'}}>
...//your screens here
</Tab.Navigator>

Answer 4

通过使用导航容器的 DarkTheme 修复它

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

return (
    <NavigationContainer theme={DarkTheme}>
       {children}
    </NavigationContainer>

Answer 5

使用react-native-navigation:^6.0.0，我测试了这里的所有内容，但实际上唯一有效的是在 NavigationContainer 上设置主题

theme={{
  colors: {
    background: 'black', 
  },
}}

Answer 6

const App = () => (
  <View style={styles.appStyle}>
     <Navigation />
  </View>
);

const styles = StyleSheet.create({
  appStyle: { flex: 1, backgroundColor: "#000" }
});

Answer 7

我使用了@jul提供的解决方案

<SafeAreaProvider style={{ backgroundColor: "black" }}>

小小的区别是我们的SafeAreaProvider包装NavigationContainer水平要高得多。

<SafeAreaProvider style={{ backgroundColor: "black" }}>
   ...
   <NavigationContainer />
   ...
</SafeAreaProvider>

用作默认背景颜色，无需使用本机模块设置根背景颜色

Answer 8

cardStyle是屏幕上的选项，而不是导航器上的选项。

<Stack.Navigator screenOptions={{ cardStyle: backgroundColor: material.containerBgColor }}>
  {/* ... */}
</Stack.Navigator>

或者

<Stack.Navigator>
  <Stack.Screen
    name="Home"
    component={AppTabNavigator}
    options={{ cardStyle: backgroundColor: material.containerBgColor }}
  />
  {/* ... */}
</Stack.Navigator>

参考：https://reactnavigation.org/docs/en/next/stack-navigator.html#cardstyle

可能更好的方法是使用主题系统来传递颜色，而不是为每个导航器指定它： https: //reactnavigation.org/docs/en/next/themes.html