用于反应原生的过渡动画(react-navigation和redux)

时间:2018-04-16 07:58:26

标签: react-native react-navigation

我按照下面的代码实现了屏幕转换动画,但它似乎没有用。我正在使用react-navigation(1.0.0-beta.26)和redux。

const transitionConfig = () => {
  return {
    transitionSpec: {
      duration: 750,
      easing: Easing.out(Easing.poly(4)),
      timing: Animated.timing,
      useNativeDriver: true,
    },
    screenInterpolator: sceneProps => {
        const { position, layout, scene, index, scenes } = sceneProps
        const toIndex = index
        const thisSceneIndex = scene.index
        const height = layout.initHeight
        const width = layout.initWidth

        const translateX = position.interpolate({
          inputRange: [thisSceneIndex - 1, thisSceneIndex, thisSceneIndex + 1],
          outputRange: [width, 0, 0]
        })
        const translateY = position.interpolate({
          inputRange: [0, thisSceneIndex],
          outputRange: [height, 0]
        })

        const slideFromRight = { transform: [{ translateX }] }
        const slideFromBottom = { transform: [{ translateY }] }

        const lastSceneIndex = scenes[scenes.length - 1].index

        if (lastSceneIndex - toIndex > 1) {
          if (scene.index === toIndex) return
          if (scene.index !== lastSceneIndex) return { opacity: 0 }
          return slideFromBottom
        }

        return slideFromRight
      },
  }}

export const AppNavigator = StackNavigator({
    Screen1: {screen: Screen1, navigationOptions:{header:null}},
    Screen2: {screen: Screen2, navigationOptions:{header:null}},
}, {
    initialRouteName: 'Screen1',
    transitionConfig,
});

class App extends Component {
    return (
        <View>
            <AppNavigator />
        </View>
    )
}

我正在使用如下所述的redux调度进行导航    this.props.navigation.dispatch({type:'Screen2'})

0 个答案:

没有答案