1

我正在寻找一个教程来实现延迟加载或在底部导航被路由到另一个屏幕（当屏幕更改时）而不是在没有任何动画的情况下显示它时向屏幕显示一些动画。我没有找到页面交易动画。但是我设法在页面打开时为屏幕中的组件设置动画，以便用户在打开屏幕时看到一些动画。延迟加载仅在第一次导航加载时实现。

我使用react-native-animatable为组件设置动画。我不知道我是否以正确的方式这样做。

这是我的代码。

constructor(props: any) {
        super(props)
        this.state = {
         
         dummyKey:4564654
            
        };
}

componentDidMount(){
    this.props.navigation.addListener('focus', (e: any) => {   
       if(e){          
       
         this.setState({dummyKey:Math.random()})
       }
     })
}
render(){
 <Animatable.View key={this.state.dummyKey} animation={'bounceIn'} >
     //View to animate when loaded
    </Animatable.View>              
}

我得到了这些结果

在此处输入图像描述

我的问题

  1. 这是正确的做法吗，利弊是什么？
  2. 换屏时如何实现换屏动画？（我只看到堆栈导航屏幕更改的动画，但没有看到底部标签导航）
  3. 如果我将 ref 添加到 Animatable.View 组件，并且如果我尝试在 didcomponentmount 动画上调用动画，为什么没有被触发（或者您能否提供任何示例）？

还有如何在隐藏和显示时为反应导航堆栈导航标题设置动画。

4

0 回答 0