我正在使用 React Native 实现启动屏幕,并且我只是使用 StackNavigator 将路线更改为 启动画面中的动画完成时的>主要 Activity 。为此,我试图找到一种触发 this.props.navigation.navigate('Main') 函数的方法。
The question is that how i can implement the onComplete function in my animation class?
这是我的动画代码:
import React from 'react';
import { Animated, Text, View } from 'react-native';
class FadeInView extends React.Component {
state = {
fadeAnim: new Animated.Value(0), // Initial value for opacity: 0
}
componentDidMount() {
Animated.timing( // Animate over time
this.state.fadeAnim, // The animated value to drive
{
toValue: 1, // Animate to opacity: 1 (opaque)
duration: 1000, // Make it take a while
}
).start(); // Starts the animation
}
render() {
let { fadeAnim } = this.state;
return (
<Animated.View // Special animatable View
style={{
...this.props.style,
opacity: fadeAnim, // Bind opacity to animated value
}}
>
{this.props.children}
</Animated.View>
);
}
}
export default FadeInView
和我的SplashScreen:
import React, { Component } from 'react';
import {
StyleSheet,
Text,
View,
Image
} from 'react-native';
import FadeInView from '../Animations/FadeInAnimation';
import { StackNavigator } from 'react-navigation';
import RanjoorMain from './RanjoorMain';
class SplashScreen extends Component {
render() {
return (
<View style={styles.container}>
<View style={{flex:1}}></View>
<FadeInView style={{width: 230, height: 230, backgroundColor: 'transparent'}}>
<Image style={styles.introLogo}
source={require('../Images/Logo/Ranjoor.png')}
/>
</FadeInView>
<View style={{flex:1}}></View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#3863cc',
},
welcome: {
fontSize: 45,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#242329',
marginBottom: 5,
},
introLogo: {
width: 230,
height: 230
}
});
/* This StackNavigator will change the route to the RanjoorMain.js after a couple of ms */
const GoToRanjoorMain = StackNavigator({
Splash: { screen: Splas },
Main: { screen: RanjoorMain }
})
GoToRanjoorMain.navigationOptions = {
title: 'Ranjoor',
};
export default SplashScreen
最佳答案
您可以为动画的 start
方法提供一个完成处理程序。
Animated.timing(
this.state.fadeAnim,
{
toValue: 1,
duration: 1000,
}
).start(() => nav.goToSomeScreen());
关于javascript - React Native 中动画完成时触发函数?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45006733/