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

【问题标题】：Disable animation for a custom header in React Navigation在 React Navigation 中禁用自定义标题的动画
【发布时间】：2021-05-07 11:56:18
【问题描述】：

我想禁用 Stack Navigator 标题部分的屏幕动画。

我在 Stack Navigator 中通过 screenOptions 定义了一个通用的自定义 Header。

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

我也尝试将headerMode 设为screen 和float，但这并没有帮助。我想看看是否有类似于animationEnabled的属性，但对于标题组件。

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

【问题讨论】：

标签： react-native react-navigation react-navigation-v5

【解决方案1】：

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

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>
  )
}

【讨论】：