我正在使用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的新手。请帮忙。