React Navigation 自定义导航器转换答案

【问题标题】：React Navigation custom navigator transitionsReact Navigation 自定义导航器转换
【发布时间】：2020-06-12 02:19:45
【问题描述】：

我希望创建一个 Stack Navigator，它可以在 2 个屏幕之间处理特定元素的动画。 Fluid Transitions 看起来像是我可以使用的库，但它不支持 react-navigation 5.X。如果有一个具有此功能的包用于 react-navigation v5，那就太好了。

但是，如果当前没有 v5 的软件包，我想扩展 StackNavigator 来处理这种功能。我已经能够删除StackNavigator 的默认动画，类似于以下内容（其中transition 是Stack.Screen 的options 属性中的布尔值：

const CustomTransitionStackNavigator = ({
  initialRouteName,
  children,
  screenOptions,
  ...rest
}) => {
  if (descriptors[state.routes[state.index].key].options.transition) {
    return (
      <View style={{ flex: 1 }}>
        {descriptors[state.routes[state.index].key].render()}
      </View>
    );
  }

  return (
    <StackView
      {...rest}
      descriptors={descriptors}
      navigation={navigation}
      state={state}
    />
  );
};

我希望能够使用Context（或其他方法）将过渡进度传递给场景的后代以处理动画。有没有办法在 v5 中获得过渡进度？或者这个CustomTransitionStackNavigator 需要管理那个状态吗？谢谢！

【问题讨论】：

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

【解决方案1】：

您可以使用CardAnimationContext 或useCardAnimation（这只是第一个的便利包装）在堆栈导航器中获取转换进度。

例如：

import { useCardAnimation } from '@react-navigation/stack';
import React from 'react';
import { Animated } from 'react-native';

export const SomeScreen = () => {
  const { current } = useCardAnimation();

  return (
    <Animated.View
      style={{
        width: 200,
        height: 200,
        backgroundColor: 'red',
        transform: [{ scale: current.progress }],
      }}
    />
  );
};

此功能目前似乎没有记录，但您可以查看TypeScript definitions 以获取更多信息。

【讨论】：