React Native 在Android上,当StackNavigator位于底部选项卡导航器内部且headerShown=false时,页眉 Flink

t5zmwmid  于 2022-12-24  发布在  React
关注(0)|答案(2)|浏览(143)

这是一个小吃显示的问题:从我的测试来看,它必须在物理设备上运行才能观察到行为。
我有一个React Navigation 6中的底部标签导航器。每个标签内都有一个堆栈导航器。我想只显示堆栈导航器的标题,所以我将每个标签的标签导航器选项headerShown设置为false(在演示小吃中,仅为第二个标签设置此选项以显示差异-如果两个标题都显示,则不会 Flink )。
这会导致第一次打开标签页时标题 Flink (仅限Android)。在零食中,我设置了unmountOnBlur以更好地显示这个问题,所以每次打开标签页时都会出现这个问题,而不仅仅是第一次。看起来标签页导航器的标题被短暂渲染或保留了空间,然后立即被删除,但它非常明显,看起来很糟糕。在iOS上运行正常。
是否有办法防止 Flink ?是否是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>
  );
}
qmelpv7a

qmelpv7a1#

我现在通过摆脱NativeStackNavigator并切换到StackNavigator来解决这个问题。
NativeStackNavigator当前似乎已损坏。

km0tfn4u

km0tfn4u2#

正如Episodex提到的,使用NativeStackNavigator。
然后在导航器中使用headerMode:'none ',该导航器不应具有标题。
Source: https://github.com/react-navigation/react-navigation/issues/614#issuecomment-289410296

相关问题