Drawer Navigator 事件（打开、关闭）为菜单设置动画答案

【问题标题】：Drawer Navigator Event (open, close) to animate a menuDrawer Navigator 事件（打开、关闭）为菜单设置动画
【发布时间】：2018-10-19 09:59:07
【问题描述】：

我的抽屉：

const AppDrawerNavigator = createDrawerNavigator({

    Home: {
        screen: HomeScreen,
    },
}, {
    contentComponent: Sidebar
}
 )

这里是我的侧边栏组件：（为了更清晰）

render() {
  const routes = [{
      title: "Home",
      icon: "home",
      route: "HomeScreen",
  },
  {
      title: "Settings",
      icon: "cog",
      route: "Settings",
  }]

  handleViewRef = ref => this.view = ref;
  bounce = () => this.view.bounce(80000)

return (
    <Animatable.View animation="fadeInDown" iterationCount="infinite" direction="alternate">
     <View style={ styles.tab}>
     {
         routes.map(e => (
             <TouchableOpacity key={e.route} style={ styles.link } onPress={_ => this.navigate(e.route)}> 
                <Icon style={styles.ico} name={e.icon} size={20}/>
               <Text style={styles.txt}> {e.title}  </Text>
              </TouchableOpacity>
        ) 
)}
   </Animatable.View>

如您所见，我使用来自https://github.com/oblador/react-native-animatable 的动画视图

这个库得到了onAnimationBegin，所以我想要从抽屉里得到一个“事件”，上面写着“我打开”，所以我可以调用onAnimationBegin来开始我的动画。因为在我的例子中，它是一个循环，只是为了看看动画是否有效。

非常感谢您的帮助

【问题讨论】：

标签： react-native react-native-android react-native-navigation react-native-drawer react-native-animatable

【解决方案1】：

我认为，因为侧边栏是一个完整的 react 组件，所以可以使用 componentDidMount() 方法。所以你可以做的是：

componentDidMount(){
    onAnimationBegin()
}

关于 componentDidMount() 方法的完整参考可以在这里找到：https://reactjs.org/docs/react-component.html#componentdidmount

【讨论】：