Question

我希望每个屏幕都有自定义事务动画对于实施例A-> B衍生物B-> C.

我找到了： https://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions

但我不知道如何使用它：this.props.navigation.navigate（'SearchVideo'，{keywork：keywork}）

任何人都可以帮助我？

Answer 1

如果您使用react-navigation，则可以使用transitionConfig StackNavigator来自定义屏幕转换。原始来源为here。但是，它无法知道上一个屏幕，因此您只能根据当前屏幕的信息进行自定义。

转换到B的示例是left =＆gt;右边和C顶部=＆gt;底部：

const myNavigator = StackNavigator(
  {
    A: { screen: A },
    B: { screen: B },
    C: { screen: C }
  },
  transitionConfig: () => ({
    screenInterpolator: screenProps => {
      const { layout, position, scene } = sceneProps
      const { index, route: { routeName } } = scene

      const width = layout.initWidth
      const height = layout.initHeight
      let translateX = 0
      let translateY = 0
      const opacity = position.interpolate({
        inputRange: [index - 1, index - 0.99, index],
        outputRange: [0, 1, 1],
      })

      switch (routeName) {
        case 'B':
          translateX = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [-width, 0, 0],
          })
          break;
        case 'C':
        default:
          translateY = position.interpolate({
            inputRange: [index - 1, index, index + 1],
            outputRange: [-height, 0, 0],
          })
      }
      return {
        opacity, transform: [
          { translateX },
          { translateY }
        ]
      }
    }  
  })
)

每个屏幕都有React-Native自定义事务动画

1 个答案: