react-native控制页面跳转行为

react-native控制页面跳转行为

   无论是原生app还是用react native开发的app,ios和android的页面跳转风格是不一样的,那么我们怎么改变android页面跳转风格使其也像ios一样优雅呢?

   我们使用的 StackNavigator不但给我们提供了页面之间强大而又便捷的导航,还允许我们控制screen的许多属性。现在来看看如何用transitionConfig来配置页面的跳转行为。

  话不多说看代码=-=

  transitionConfig: () => ({
      //页面跳转的动画
      transitionSpec: {
        duration: 300,
        easing: Easing.out(Easing.poly(4)),
        timing: Animated.timing,
      },
      /页面跳转的行为
      screenInterpolator: sceneProps => {
        const { layout, position, scene } = sceneProps;
        const { index } = scene;

        const width = layout.initWidth;
        const translateX = position.interpolate({
          inputRange: [index - 1, index, index + 1],
          outputRange: [width, 0, 0],
        });

        const opacity = position.interpolate({
          inputRange: [index - 1, index - 0.99, index],
          outputRange: [0, 1, 1],
        });

        return { opacity, transform: [{ translateX }] };
      },
    }),

现在,我们的app在android上页面跳转也能像ios一样优雅了(*^▽^*)。

补充:

screenProps ,文档似乎没怎么介绍这个属性,不知道它能干嘛。它是react-navigation自带的一个属性,属于navigationOptions的一个属性,和navigation一样的可传递给子页面。

日记本

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

赞赏支持
被以下专题收入,发现更多相似内容