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

【问题标题】：React-Native custom transaction animation each screen每个屏幕的 React-Native 自定义事务动画
【发布时间】：2018-05-05 14:29:00
【问题描述】：

我想要每个屏幕的自定义交易动画例如 A->B 不同的 B->C。

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

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

谁能帮帮我？

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

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

转换到 B 的示例是左 => 右，而到 C 的转换是顶部=>底部：

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

【讨论】：