Событие Drawer Navigator (открыть, закрыть) для анимации меню
Мой ящик
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, так что я хотел бы архивировать, чтобы получить "событие" из ящика с надписью "im open", чтобы я мог вызвать onAnimationBegin, чтобы запустить мою анимацию. Потому что в моем примере это цикл, просто чтобы посмотреть, работает ли анимация.
Большое спасибо за вашу помощь
1 ответ
Я думаю, поскольку боковая панель является компонентом полного реагирования, вы можете использовать метод componentDidMount(). Итак, что вы можете сделать, это:
componentDidMount(){
onAnimationBegin()
}
Полная ссылка на метод componentDidMount() может быть найдена здесь: https://reactjs.org/docs/react-component.html