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

【问题标题】：White background flashing when switching screens - React-Navigation v5切换屏幕时白色背景闪烁 - React-Navigation v5
【发布时间】：2020-05-11 01:03:08
【问题描述】：

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

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

但是在 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 会出现闪烁问题。我不确定其他屏幕，因为它们没有发出任何网络请求/异步内容。

【问题讨论】：

您找到解决方案了吗？我有同样的问题
如果我没记错的话，解决方案是在本地级别的某个地方。您可以在 iOS 的 plist 文件和 Android 的 gradle 文件中设置应用程序 bgcolor。祝你好运！
我设法通过删除所有 LayoutAnimation 代码来修复故障。谢谢！
@andreicovaciu 对我来说 LayoutAnimation 也是造成这种情况的原因，但是仅仅删除所有 LayoutAnimation 代码似乎是一个糟糕的解决方案。

标签： react-native react-navigation react-navigation-stack

【解决方案1】：

我遇到了同样的问题并进行了调查。似乎是屏幕脱落造成的。我找到了一些方法。您可以根据自己的需要选择一种。它们是：

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

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

您还可以在堆栈视图配置中将屏幕模式指定为modal，这可以防止屏幕被分离，例如：
```
<StackNavigator.Navigator mode="modal">
  {/*.... Your stack screens ... */}
</StackNavigator.Navigator>
```
您可以使用cardOverlay 属性在screenOptions 中添加自定义叠加层：
```
cardOverlay: () => (
  <View
    style={{
    flex: 1,
    backgroundColor: '#YOUR_COLOR',
  }}
/>)
```
参考：https://reactnavigation.org/docs/stack-navigator/#cardoverlay
您可以使用cardStyleInterpolator:

这允许您在从一个屏幕导航到另一个屏幕时自定义动画转换。

以下是原始文档中的 sn-ps：
```
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

【讨论】：

选项一对我有用。我将 NavigationContainer 包裹在一个视图中。
插话，这些都不适合我，react navigator v5，marcelo monteiro 下面的解决方案对我有用
@fullStackChris 我认为说上述问题都不适合您是不正确的，因为 Marcelo Monteiro 描述的解决方案基于选项 4 (CardStyleInterpolator ) - "4. You can use the cardStyleInterpolator:"
它很有用，只需将 stacknavigator 包裹在视图内并添加 bgcolor 即可。

【解决方案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

【讨论】：

加上这个，如果你想有这个淡入淡出动画但保留垂直飞入，你可以将不透明卡片样式插值替换为：cardStyle: { transform: [{ translateY: progress.interpolate({ inputRange: [0, 1], outputRange: [window.height, 0] }), }], },

【解决方案3】：

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

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

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

【讨论】：

这是我能在 React Navigation 6 中找到的唯一方法。谢谢！
绝对是最佳答案，无需依赖变通方法。
请注意，这需要升级到 React Navigation v6，并且在 v5 中不起作用

【解决方案4】：

对我有用的解决此问题的一个简单方法是在选项卡导航器中设置sceneContainerStyle，如下所示：

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

【讨论】：

这个答案适用于任何Tab 导航器。几乎所有其他答案都与Stack 导航器有关。
这也适用于Drawer Navigator
太棒了，为我在标签导航器上的 React Navigation v6 上工作！

【解决方案5】：

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

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

【讨论】：

【解决方案6】：

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

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

小区别在于我们的SafeAreaProvider 包装NavigationContainer 在更高的级别。

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

作为默认背景色，不使用原生模块设置根背景色

【讨论】：

【解决方案7】：

在我的情况下，这是由于 NavigationContainer 中 SafeAreaProvider 的默认样式所致。设置

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

成功了。

【讨论】：

【解决方案8】：

我已经通过禁用 Tab Navigator 的 sceneAnimationEnabled 解决了这个问题。

<Tab.Navigator
  sceneAnimationEnabled={false}>
  {...}
</Tab.Navigator>

【讨论】：

【解决方案9】：

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

【讨论】：

感谢您的澄清，但问题并没有消失：/
您使用哪个包进行标签导航？
"@react-navigation/bottom-tabs": "^5.0.0-alpha.39", "@react-navigation/native": "^5.0.0-alpha.29", "@react-navigation/stack": "^5.0.0-alpha.63",

【解决方案10】：

我通过在<Tabs.Navigator> 组件中设置lazy={false} 解决了这个问题：

<Tabs.Navigator
    lazy={false}
>

【讨论】：

嗨，你是真正的天使。它也对我有用。

【解决方案11】：

对于 expo，您可以将 App.json 文件中的 backgroundColor 更改为 #000000。

您的应用的背景颜色，位于您的任何 React 视图后面。这也称为根视图背景颜色。

【讨论】：

【解决方案12】：

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

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

【讨论】：

【解决方案13】：

我用这段代码解决了这个问题：你也可以把cardStyleInterpolator 放在每个<Screen> 的options 属性中

const notAnimation = () => ({});

screenOptions={{ cardStyleInterpolator: notAnimation }}>

【讨论】：

【解决方案14】：

我的问题是我在 App.tsx 中启用了enableScreens()。

你有两个选择：

删除enableScreens() 调用
将detachPreviousScreen: false 添加到导航器的screenOptions 并将enableScreens(true) 添加到您的App.tsx

【讨论】：

【解决方案15】：

使用react-native-navigation:^4.4.4，通过禁用动画来解决问题。

const AppNavigator = createStackNavigator(
  {...<YOUR_CONFIG>},
  {
   ...
   defaultNavigationOptions: {animationEnabled: false}, // Add this line
  },
);

不用担心backgroundColor?

【讨论】：

【解决方案16】：

在你的 NavigationContainer 外面加上 flex: 1 和你喜欢的颜色的 backgroundColor

【讨论】：