13

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

但是，如果没有 v5 的当前包，我想扩展StackNavigator以处理这种功能。我已经能够StackNavigator使用类似于以下内容的内容删除默认动画（其中的道具中transition采用了布尔值：optionsStack.Screen

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需要管理那个状态吗？谢谢！

4

1 回答 1

5

您可以使用CardAnimationContextor 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 定义以获取更多信息。

于 2020-11-09T21:58:25.207 回答