animateNextTransition()在componentDidMount生命周期方法中不起作用

时间:2020-04-27 06:30:11

标签: react-native-reanimated

我正在使用react-native-reanimated从右边制作带有淡入淡出效果的View幻灯片,但是animateNextTransition()在componentDidMount生命周期方法中不起作用。

我的代码如下:-

import React, { Component } from "react";
import { View, StyleSheet, } from "react-native";
import { Transition, Transitioning } from 'react-native-reanimated'


export default class GridView extends Component {

    constructor(props) {
        super(props)
        this.ref = React.createRef();
    }

    transition = (
        <Transition.Together>
            <Transition.In
                type="slide-right"
                durationMs={2000}
                interpolation="easeInOut"
            />
            <Transition.In type="fade" durationMs={2000} />
            <Transition.Change />
        </Transition.Together>
    )

    componentDidMount = () => {
        this.ref.current.animateNextTransition();
    }

    render() {
        return (
            <Transitioning.View
                ref={this.ref}
                transition={this.transition}
                style={{ flex: 1 }}>
                <View style={styles.tabContainer}></View>
            </Transitioning.View>
        );
    }
}

const styles = StyleSheet.create({
    tabContainer: {
        height: 70,
        flexDirection: 'row',
        marginTop: 50,
        borderRadius: 70,
        width: 200,
        marginHorizontal: 15,
        backgroundColor: 'lightgrey',
        overflow: 'hidden'
    }
})

有什么问题吗?我是React Native的新手。请帮忙。

0 个答案:

没有答案