渲染动画后如何立即导航页面？答案

【问题标题】：How to navigate page immediately after rendering animation?渲染动画后如何立即导航页面？
【发布时间】：2019-11-29 21:38:10
【问题描述】：

我目前有一个渲染动画的加载屏幕。这样做之后，我希望它立即基于 firebase.auth().onAuthStateChange 将用户导航到特定页面。

我已经实现了动画和部分逻辑。我只需要在第一次渲染/动画完成后立即导航的能力。

 class LoadingScreen extends Component {

  state = {
    opacity: new Animated.Value(0),
  }


  onLoad = () => {

    Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 1500,
      delay: 1000,
      useNativeDriver: true,
    }).start();
  }

  render() {
    return (
      <Animated.Image
        onLoad={this.onLoad}
        {...this.props}
        style={[
          {
            opacity: this.state.opacity,
            transform: [
              {
                scale: this.state.opacity.interpolate({
                  inputRange: [0, 1],
                  outputRange: [0.85, 1],
                })
              },
            ],
          },
          this.props.style,
        ]}
      />
    );
  }

}

export default class App extends Component{

    render()
    {
        return (
            <View style={styles.container}>
            <LoadingScreen
              style={styles.image}
              source= {require('../assets/images/logo.png')}
            />
          </View>

        )

    }



    checkIfLoggedIn = () => {
        firebase.auth().onAuthStateChanged((user)=>
        {
            if(user)
            {
                this.props.navigation.navigate('Login');
            }
            else 
            {
                this.props.navigation.navigate('Signup');
            }
        })
    }

}

【问题讨论】：

Animated.timing的回调函数触发导航有什么问题

标签： ios reactjs react-native mobile react-navigation

【解决方案1】：

要在动画结束时做点什么，你应该给start()函数添加一个回调，所以：

将checkIfLoggedIn 函数作为道具传递给LoadingScreen 组件

            <LoadingScreen
              style={styles.image}
              source= {require('../assets/images/logo.png')}
              onAnimationEnd={this.checkIfLoggedIn}
            />

使用作为道具传递的函数用于动画回调

  onLoad = () => {

    Animated.timing(this.state.opacity, {
      toValue: 1,
      duration: 1500,
      delay: 1000,
      useNativeDriver: true,
    }).start(() => this.props.onAnimationEnd());
  }

【讨论】：