react-native-router-flux:在react-native-router-flux中实现场景转换动画

Question

我已经在我的react原生应用程序中使用了默认的场景更改样式和react- native -router-flux。但我试图在两个页面之间的场景过渡中使用不同的动画效果。我们怎么能这样做呢？

Answer 1

要做到这一点，你需要实现你自己的动画风格函数，the router's DefaultRenderer包含动画的代码-如果你从复制开始，你会看到你可以改变每个场景的位置，比例和透明度。

需要一些练习才能得到你想要的效果，但有用的一行是：

const inputRange = [index - 1, index, index + 1]

它可以传递给interpolate以生成转换，例如：

let opacity = position.interpolate({
  inputRange,
  outputRange: [0, 1, 0.5]
})

告诉场景：

开始不透明度转换到:激活时从0不透明度开始:使不透明度从： 1

1. Transitioning
2. ：end at 0.5 opacity

这个简单的结构允许您定义所有类型的效果。

一旦你有了一个你满意的功能，你可以在定义你的路由器时指定它：

<RouterWithRedux
  scenes={scenes}
  animationStyle={myAnimationStyle}
/>

Answer 2

您可以像这样设置您的自定义过渡效果：

​

////other imports
import StackViewStyleInterpolator from 'react-navigation-stack';

const MyTransitionSpec = ({
    duration: 1000,
    // easing: Easing.bezier(0.2833, 0.99, 0.31833, 0.99),
    // timing: Animated.timing,
});

const transitionConfig = () => ({
    transitionSpec: MyTransitionSpec,
    // screenInterpolator: StackViewStyleInterpolator.forFadeFromBottomAndroid,
    screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;
        const width = layout.initWidth;

        ////right to left by replacing bottom scene
        // return {
        //     transform: [{
        //         translateX: position.interpolate({
        //             inputRange: [index - 1, index, index + 1],
        //             outputRange: [width, 0, -width],
        //         }),
        //     }]
        // };

        const inputRange = [index - 1, index, index + 1];

        const opacity = position.interpolate({
            inputRange,
            outputRange: ([0, 1, 0]),
        });

        const translateX = position.interpolate({
            inputRange,
            outputRange: ([width, 0, 0]),
        });

        return {
            opacity,
            transform: [
                { translateX },
            ],
        };

        ////from center to corners
        // const inputRange = [index - 1, index, index + 1];
        // const opacity = position.interpolate({
        //     inputRange,
        //     outputRange: [0.8, 1, 1],
        // });

        // const scaleY = position.interpolate({
        //     inputRange,
        //     outputRange: ([0.8, 1, 1]),
        // });

        // return {
        //     opacity,
        //     transform: [
        //         { scaleY },
        //     ],
        // };
    }
});

<Router>
  <Scene
   key='main'
   hideNavBar
   transitionConfig={transitionConfig}
  >

    ...more scenes

  </Scene>
</Router>

​