如何通过react导航4+使用自定义屏幕到屏幕的过渡？

import React, { Component } from 'react';
import { Animated } from 'react-native';

class CustomTransition extends Component {
  constructor(props) {
    super(props);
    this.state = {
      transition: new Animated.Value(0),
    };
  }

  componentDidMount() {
    Animated.timing(this.state.transition, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }

  render() {
    const { transition } = this.state;
    const { children } = this.props;

    return (
      <Animated.View style={{ opacity: transition }}>
        {children}
      </Animated.View>
    );
  }
}

export default CustomTransition;

import { createStackNavigator } from 'react-navigation-stack';
import CustomTransition from './CustomTransition';
import Screen1 from './Screen1';
import Screen2 from './Screen2';

const StackNavigator = createStackNavigator(
  {
    Screen1: {
      screen: Screen1,
    },
    Screen2: {
      screen: Screen2,
    },
  },
  {
    transitionConfig: () => ({
      screenInterpolator: (sceneProps) => {
        const { position, scene } = sceneProps;
        const { index } = scene;

        return CustomTransition;
      },
    }),
  }
);

export default StackNavigator;