在加载时或在 React Native 中显示时动画反应导航底部选项卡导航屏幕的组件

Question

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

我使用 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. 如何实现换屏时的屏幕平移动画？ (I only see animation for stack nav screen change but not bottom tab nav)
3. 如果我将 ref 添加到 Animatable.View 组件，并且如果我尝试在 didcomponentmount 上调用动画 like here 没有被触发，为什么（或者您能否提供任何示例）？

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