当 StackNavigator 位于 BottomTabNavigator 内部且 Android 上的 headerShown=false 时，标题会闪烁答案

【问题标题】：Header flickers when StackNavigator is inside BottomTabNavigator with headerShown=false on Android当 StackNavigator 位于 BottomTabNavigator 内部且 Android 上的 headerShown=false 时，标题会闪烁
【发布时间】：2022-12-20 22:17:25
【问题描述】：

这是显示问题的小吃：https://snack.expo.dev/@piotrpcpl/nested-navigator-header-flicker。根据我的测试，它必须在物理设备上运行才能观察行为。

我有一个来自 React Navigation 6 的底部选项卡导航器。每个选项卡内都有一个堆栈导航器。我只想显示 Stack Navigators 的标题，所以我将每个选项卡的 Tab Navigator 选项 headerShown 设置为 false（在演示小吃中，它仅设置为第二个选项卡以显示差异 - 如果显示两个标题，则不会闪烁）。

第一次打开选项卡时，这会导致标题闪烁（仅限 Android）。在 snack 中，我设置了 unmountOnBlur 以更好地显示问题，因此它会在每个打开的选项卡上发生，而不仅仅是第一个。看起来选项卡导航器的标题被短暂渲染或者它的空间被保留并且稍后它被删除，但它非常引人注目并且看起来很破损。它在 iOS 上运行正常。

有没有办法防止闪烁？这是 React Navigation 中的错误吗？

示例的完整源代码：

import * as React from 'react';
import { View } from 'react-native';
import { SafeAreaProvider } from 'react-native-safe-area-context';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';


function Screen1() {
  return (
    <View></View>
  )
}

function Screen2() {
  return (
    <View></View>
  )
}

const Stack1Navigation = createNativeStackNavigator();
const Stack2Navigation = createNativeStackNavigator();

function Stack1Navigator() {
  return (
    <Stack1Navigation.Navigator>
      <Stack1Navigation.Screen name="Screen 1" component={Screen1} />
    </Stack1Navigation.Navigator>
  )
}

function Stack2Navigator() {
  return (
    <Stack2Navigation.Navigator>
      <Stack2Navigation.Screen name="Screen 2" component={Screen2} />
    </Stack2Navigation.Navigator>
  )
}

const BottomNavigation = createBottomTabNavigator();

function BottomNavigator() {
  return  (
    <BottomNavigation.Navigator
      screenOptions={{
        unmountOnBlur: true
      }}>
      <BottomNavigation.Screen
        name="Screen 1"
        component={Stack1Navigator}>
      </BottomNavigation.Screen>
      <BottomNavigation.Screen
        name="Screen 2"
        component={Stack2Navigator}
        options={{
          headerShown: false
        }}>
      </BottomNavigation.Screen>
    </BottomNavigation.Navigator>
  )
}

export default function App() {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <BottomNavigator></BottomNavigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
}

【问题讨论】：

您是否仅在 android 中遇到此问题？
是的，仅限安卓。在此小吃中使用 Android 选项卡时看起来也不错。但是当我使用“使用我的设备”并在 3 种不同品牌的 Android 手机上尝试时，它在所有手机上都在闪烁。
它在我的安卓设备上运行良好。
一加安卓11
检查这个它可能对你有帮助

标签： react-native react-navigation

【解决方案1】：

我现在通过摆脱NativeStackNavigator 并切换到StackNavigator 解决了这个问题。

看起来 NativeStackNavigator 目前已损坏。

【讨论】：

【解决方案2】：

正如 Episodex 提到的，使用 NativeStackNavigator。

然后在不应该有标题的导航器中使用 headerMode:'none'。

资源： https://github.com/react-navigation/react-navigation/issues/614#issuecomment-289410296

【讨论】：