react-native - React Navigation 自定义导航器转换

Question

我正在寻找创建一个堆栈导航器，可以处理两个屏幕之间的动画特定元素。 Fluid Transitions看起来像我可以使用的库，但它不支持 react-navigation 5.X.如果有一个包具有用于 react-navigation v5 的此功能，那就太好了。

但是，如果当前没有 v5 的包，我想扩展 StackNavigator处理这种功能。我已经能够删除 StackNavigator 的默认动画具有类似于以下内容的内容(其中 transition 是 options Prop 中的 bool 值 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获取更多信息。