Анимация слайдов в ReactNative происходит только один раз - PullRequest
Новая
       40

Анимация слайдов в ReactNative происходит только один раз

0 голосов
/ 04 июля 2019

Я пытаюсь создать компонент с помощью кнопки, которая при нажатии дает функциональность, похожую на ящик.

Я использую анимацию React для анимации, но анимация происходит только один раз.

Что-то я делаю неправильно в коде?

Также проверьте прикрепленное изображение

enter image description here

import React, { Component } from 'react'
import {
  View,
  Dimensions,
  Text,
  TouchableOpacity,
  StyleSheet,
  Animated,
  Easing
} from 'react-native'
import { connect } from 'react-redux'

const animationXStart = new Animated.Value(0)
const animationXEnd = new Animated.Value(-200)

class TestScreen extends Component {
  static navigationOptions = {
    header: null
  }

  constructor (props) {
    super(props)
    this.state = {
      drawerClose: true,
      visible: false,
      x: animationXStart,
      rotateY: '0deg'
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log('should component update')
    if (this.state.x !== nextState.x && this.state.rotateY !== nextState.rotateY ) {
      return false
    }
  }

  toggleDrawer = () => {
    Animated.spring(this.state.x, {
      toValue: this.state.x === animationXStart ? animationXEnd : animationXStart,
      duration: 250,
      easing: Easing.linear(),
      useNativeDriver: true
    }).start()
    this.setState({
      visible: true,
      rotateY: this.state.rotateY === '0deg' ? '40deg' : '0deg',
      x: this.state.x === animationXStart ? animationXEnd : animationXStart,
      drawerClose: !this.state.drawerClose
    })
  }

  render () {
    return (
      <View style={styles.container}>
        <Animated.View style={[styles.child, {
          transform: [
            { perspective: 850 },
            { translateX: this.state.x },
            { rotateY: this.state.rotateY}
          ]
        }]}>
          <TouchableOpacity style={{flex: 1, height: '10%'}} onPress={this.toggleDrawer}>
            <Text style={{textAlign: 'right', color: 'black', fontSize: 20}}>
              Right ------
            </Text>
          </TouchableOpacity>
          <View style={{height: '90%'}} />
        </Animated.View>
      </View>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: '#14275e',
    flex: 1
  },
  child: {
    flex: 1,
    backgroundColor: 'green',
    marginTop: 30
  },
  childDrawer: {
    flex: 1,
    backgroundColor: 'green',
    scaleX: Dimensions.get('window').height * 0.60,
    marginTop: '20%',
    marginBottom: '20%',
    transform: [
      { perspective: 850 },
      { translateX: -Dimensions.get('window').width * 0.40 },
      { rotateY: '50deg'}
    ]
  }
})

const mapStateToProps = (state) => {
  return {
    materials: state.materials.payload,
    fetching: state.materials.fetching,
    localGovernmentArea: state.profile.localGovernmentArea
  }
}

const mapDispatchToProps = (dispatch) => {
  return {}
}

export default connect(mapStateToProps, mapDispatchToProps)(TestScreen)
...