抽屉导航器事件(打开、关闭)以动画形式显示菜单

Question

我的抽屉：

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 的可动画视图

这个库开始了AnimationBegin，所以我想存档的是从抽屉里得到一个"事件"，上面写着"im open"，这样我就可以调用onAnimationBegin开始我的动画。因为在我的例子中，这是一个循环，只是为了看看动画是否有效。

非常感谢您的帮助

Answer 1

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

componentDidMount(){
onAnimationBegin()
}

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