Question

我一直在使用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
转换自：以0.5不透明度结束

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

一旦您获得了一项功能，您就可以在定义路由器时指定它：

<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>

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

2 个答案: