反应导航图标组件动画

Question

我有一个带有三个标签的React导航底部导航器V3：

• 代理人
• ArScreen
• 设置

中间的图标必须是大图标，当我转到相应的屏幕时，需要在该图标上运行动画。动画基于类似Gooey的效果，如下所示：

https://itnext.io/react-native-tab-bar-is-customizable-c3c37dcf711f

所以我的问题是：

我发现了如何将此组件图标添加到标签栏，如下所示：

const MainNavigator = createBottomTabNavigator({
 Affiche: {
  screen: Affiche,
 },
 ArScreen: {
  screen: ArScreen,
  navigationOptions: ({navigation}) => ({
    tabBarIcon: (<AddButton/>),
    tabBarOnPress: ({navigation}) => {
      this.child.handleAddButtonPressOpen();
      navigation.navigate('ArScreen');
    }
 })
},
 Settings: {
  screen: Settings,
 }
});

我的AddButton组件具有启用动画的功能：

handleAddButtonPressOpenClose = () => {
     let { pressed } = this.state;
     if(pressed) {
         this.animateReverse(0);
     }
     else {

             this.animate(1);
     }
     this.setState({pressed: !pressed});
 }

因此，当我按下中间按钮时，我希望导航到Screen ArScreen并运行AddButton动画。实际上，我无法让两者一起运行。