这是一个小吃显示的问题:从我的测试来看,它必须在物理设备上运行才能观察到行为。
我有一个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>
);
}
2条答案
按热度按时间qmelpv7a1#
我现在通过摆脱
NativeStackNavigator
并切换到StackNavigator
来解决这个问题。NativeStackNavigator
当前似乎已损坏。km0tfn4u2#
正如Episodex提到的,使用NativeStackNavigator。
然后在导航器中使用headerMode:'none ',该导航器不应具有标题。
Source: https://github.com/react-navigation/react-navigation/issues/614#issuecomment-289410296