13

2 つの画面間で特定の要素のアニメーション化を処理できる Stack Navigator を作成しようとしています。Fluid Transitionsreact-navigationは使用できるライブラリのように見えましたが、 5.Xをサポートしていません。react-navigation v5 でこの機能を備えたパッケージがあれば、それは素晴らしいことです。

StackNavigatorただし、v5 の現在のパッケージがない場合は、この種の機能を処理できるように を拡張したいと考えています。次のようなものを使用して、のデフォルトのアニメーションを削除できました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