在 React Navigation 中禁用自定义标题的动画

Question

我想禁用堆栈导航器标题部分的屏幕动画。

我通过在堆栈导航器中定义了一个通用的自定义标头screenOptions。

并具有屏幕转换的默认动画。我想确保动画仅发生在屏幕上，而不发生在我的标题组件上。由于标题将是静态内容。

我也尝试过制作headerModeasscreen和float但那没有帮助。我想看看是否有一个类似于animationEnabled标题组件的属性。

<Stack.Navigator
  screenOptions= {{
    headerMode: 'screen',
    animation: 'fade',
    header: (props) =>
        <Header {...props} />
  }}>
  // Rest of my screens
</Stack.Navigator>

Answer 1

您可以做的是将标题与导航器完全分开，并使用引用来控制导航。像这样的东西：

const App = () => {
  const navigationRef = useNavigationContainerRef()

  return (
    <View>
      <Text>This header won't animate!</Text>
      <Text onPress={() => navigationRef.navigate('Home')}>Link</Text>
    </View>
    <NavigationContainer ref={navigationRef}>
      <Stack.Navigator screenOptions={{ headerShown: false }}>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Other" component={OtherScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  )
}