reactjs - 每个屏幕的 React-Native 自定义事务动画

Question

对于示例 A->B 不同的 B->C，我想要每个屏幕的自定义事务动画。

我发现：https ://stackoverflow.com/questions/43974979/react-native-react-navigation-transitions

但我不知道如何使用它： this.props.navigation.navigate('SearchVideo',{keywork:keywork})

任何人都可以帮助我吗？

标签： reactjsreact-native

Answer 1

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

转换到 B 的示例是 left => right，转换到 C 是 top=>bottom：

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 }
        ]
      }
    }  
  })
)