React Native App 开发进阶指南：自定义页面进入动画

2024-02-14 02:40:33

# 绪论

在 React Native App 开发中，流畅的用户体验是至关重要的。而页面进入动画恰恰是提升用户体验的重要一环。本文将带你领略如何自定义 React Native 中页面的进入动画，从而打造独具一格的 App 体验。

# React Navigation 中的页面进入动画

React Navigation 是 React Native 中备受推崇的导航库。它提供了 createStackNavigator API，可用于控制页面的进入和退出动画。默认情况下，createStackNavigator 为所有页面应用统一的进入动画（通常是滑动或淡入）。

# 自定义进入动画

为了实现自定义进入动画，我们需要修改 createStackNavigator 的配置。具体步骤如下：

在 route.js 文件中，修改 createStackNavigator 的 transitionConfig 属性：

import { TransitionPresets } from 'react-navigation-stack';

const transitionConfig = () => ({
  screenInterpolator: CardStackStyleInterpolator.forHorizontalIOS,
  transitionSpec: {
    duration: 400,
    easing: Easing.out(Easing.poly(4)),
    timing: Animated.timing,
  },
});

const AppNavigator = createStackNavigator(
  // ...
  {
    transitionConfig,
  },
  // ...
);

CardStackStyleInterpolator.forHorizontalIOS 指定了类似 iOS 的卡片堆叠式进入动画。
transitionSpec 允许我们自定义动画的持续时间、缓动函数和计时函数。

在单独的页面中，修改 componentDidMount 生命周期方法：

import { Animated } from 'react-native';

class CustomPage extends Component {
  state = {
    fadeAnim: new Animated.Value(0),
  };

  componentDidMount() {
    Animated.timing(this.state.fadeAnim, {
      toValue: 1,
      duration: 500,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <Animated.View style={{ opacity: this.state.fadeAnim }}>
        {/* ... */}
      </Animated.View>
    );
  }
}