Question

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

但是，如果没有针对v5的当前软件包，我想扩展StackNavigator来处理这种功能。我已经能够使用以下类似的方法删除StackNavigator的默认动画（其中transition是options道具中Stack.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需要管理该状态？谢谢！

Answer 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以获得更多信息。

反应导航自定义导航器过渡

1 个答案: