React Router Native 页面切换动画

本文介绍了如何在React Router Native中实现页面切换时的动画效果,包括动画组件的创建和具体的使用实例,帮助开发者为应用增添动态体验。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

啥也不说,上代码

动画组件

import React from 'react';
import {
    Animated, View, StyleSheet,
    findNodeHandle,
    UIManager
} from 'react-native';

interface Props {
    // 如果标识值不同,组件将执行动画
    sign: string
}

export default class TransitionAnimation extends React.Component<Props> {
    // 声明一个动画值
fadeAnim = new Animated.Value(500);

    ref = undefined;
    width = 0;
height = 0;

    state = {
        showChildren: this.props.children,
        animationing: false
}

    shouldComponentUpdate(nextProps, nextState, context) {
        if (this.props.sign != nextProps.sign) {
            this.fadeAnim.setValue(this.height);
            this.setState({ animationing: true }, () => {
                // 执行动画
                Animated.timing(
                    // 动画值
                    this.fadeAnim,
                    {
                        toValue: 0,
                        duration: 300,              // 让动画持续一段时间,10s
                    } as Animated.TimingAnimationConfig
                ).start(({ finished }) => {
                    if (finished) {
                        this.setState({ showChildren: nextProps.children, animationing: false });
                    }
                });
            });
        }

        return true;
}

    render() {
        return (
            <View onLayout={(e) => {
                this.height = e.nativeEvent.layout.height;
                this.width = e.nativeEvent.layout.width;
            }} style={styles.view} ref={r => this.ref = r}>
                {this.state.showChildren}
                <Animated.View  // 使用专门的可动画化的View组件
                    style={[styles.animatedView, { height: this.state.animationing ? '100%' : 0, top: this.fadeAnim }]}
                >
                    {this.state.animationing && this.props.children}
                </Animated.View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    view: {
        width: '100%',
        height: '100%',
    },
    animatedView: {
        width: '100%',
        position: 'absolute',
    }
});

使用实例

<TransitionAnimation
    sign={this.props.history.location.pathname}
>
    <Switch location={this.props.location}>
        <Route path='/Home' component={Component1} />
        <Route path='/Account' component={Component2} />
    </Switch>
</TransitionAnimation>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值