底部标签导航中的动画仅起作用一次-反应导航

Question

我在componentDidMount中有一个底部标签导航器（反应导航）和LayoutAnimation.easeInEaseOut（）。它在选项卡图标和名称之间提供了很好的动画效果。但是动画只发生一次。在那之后它没有动画。

看看视频here

https://youtu.be/H0AL6DZCimQ

P.S请看视频标签中图标​​动画的底部标签栏。

const TabNavigator = createBottomTabNavigator({
  Home,
  Events,
  Search,
})

Home.js

class Home extends Component<Props> {
  componentDidMount() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    //LayoutAnimation.easeInEaseOut(); //keeping it here or in componentDidMount doesn't affect 
    return (
      <View style={styles.container}>
        <Text>Home!!</Text>
      </View>
    );
  }
}

Events.js

class Events extends Component<Props> {
  componentDidMount() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Events!!</Text>
      </View>
    );
  }
}

Search.js

class Search extends Component<Props> {
  componentDidMount() {
    LayoutAnimation.easeInEaseOut();
  }
  render() {
    return (
      <View style={styles.container}>
        <Text>Search!!</Text>
      </View>
    );
  }
}