react-native-router-flux：在react-native-router-flux中的场景过渡中实现动画

Question

我一直在使用react-native-router-flux在我的React本机应用程序中使用默认场景更改样式。 但是我试图在两个页面之间的场景转换中使用不同的动画效果。 我们该怎么做？

Answer 1

为此，您需要实现自己的动画样式功能， 路由器的DefaultRenderer包含动画代码-如果从复制动画开始，您会发现可以更改每个场景的位置，比例和不透明度。

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

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

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

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

告诉现场：

1. 过渡到：从0不透明度开始
2. 活跃时：不透明1
3. 转换自：最终以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>