React Native - Animated.spring мигает при возврате анимации

Question

В моем собственном приложении для реагирования я пытаюсь создать ящик. Когда я нажимаю кнопку, она должна открываться, и это работает отлично, проблема в том, когда я закрываю ее. Когда я нажимаю кнопку закрытия, анимация мигает, вроде открытия и закрытия в течение 2-3 раз, прежде чем она определенно закрывается.

Это, как я делаю это

export default class Drawer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      height: new Animated.Value(0) 
     } 
    } 

    showContent =() => { 
     Animated.spring(this.state.height, {toValue:130}).start(); 
    } 

    hideContent =() => { 
     Animated.spring(this.state.height, {toValue:0}).start(); 
    } 

    render() { 
     return (
      <View> 
       <TouchableHighlight 
        onPress={this.showContent} 
        underlayColor="transparent" 
       > 
        <Text>Show</Text> 
       </TouchableHighlight> 

       <TouchableHighlight 
        onPress={this.hideContent} 
        underlayColor="transparent" 
       > 
        <Text>Hide</Text> 
       </TouchableHighlight> 

       <Animated.View style={{height: this.state.height}}> 
        <Text>Content</Text> 
       </Animated.View> 
      </View> 
     ); 
    } 
} 

Answer 1

Причина, по-видимому, анимация «мигание» происходит потому, что вы используете пружинный анимацию, которая отскакивает или подпрыгивает, когда он достигает своего конечного значения. Попробуйте заменить spring с timing, чтобы избавиться от рикошета:

showContent =() => { 
    Animated.timing(this.state.height, {toValue:130}).start(); 
} 

hideContent =() => { 
    Animated.timing(this.state.height, {toValue:0}).start(); 
} 

Answer 2

Просто столкнулся с той же проблемой. Вы все еще можете использовать Animated.spring, но он нуждается в правильной минимальной высоте для дополнительной «комнаты для маневра». Кажется, это может изменяться, в моем случае это была минимальная высота 2 для максимальной высоты 55.

Answer 3

Я довольно поздно, но у меня была эта проблема и была решена с помощью конфигурации bounciness: 0, чтобы полностью отключить мигание.

Дополнительная информация о in the documentation.