Реагировать на изменения в собственном состоянии - PullRequest
Новая
       50

Реагировать на изменения в собственном состоянии

0 голосов
/ 30 мая 2018

Как лучше всего реагировать на изменение анимации компонентов при изменении состояния?

Например, у меня есть список элементов, и я нажимаю на один элемент, который хочу, чтобы он исчез, а те, что под ним, - 'вставай, заполняя недостающее пространство

Как сделать переход плавным?

1 Ответ

0 голосов
/ 30 мая 2018

React-natives Анимированный API работает очень хорошо.

В основном у вас есть значение в состоянии, которое вы связываете со стилем реквизита, и со временем меняете это значение.(для примеров перейдите по ссылке)

Для плавной анимации используйте usenativedriver (не всегда возможно), а также убедитесь, что у вас нет запуска отладчика в эмулируемом / реальном устройстве

РЕДАКТИРОВАТЬ: 2018-05-31

Это пример того, как я использовал его.Вероятно, существуют другие способы сделать это 

import { Animated, Text} from 'react-native';

class ShowCaseAnimation extends Component {

  state = { 
    animations: {
      height: new Animated.Value(0),
      fade: new Animated.Value(0),
    }
  }

  componentDidMount() {
    const { height, fade } = this.state.animations;
    if (this.props.animate) {
      doneAnimation({ height, fade }).start(() => {
        // Do stuff after animations
      });
    }
  }

  render() {
    const { animations } = this.state; 
    return (
      <Animated.View 
        style={{
          height: animate? animations.height : 300, 
          opacity: animate? animations.fade: 1,
          // other styling 
        }}
      >
        <Text> All your base are belong to us </Text>
      </Animated.View>
    );
  }
}

* doneAnimation: *

import { Animated, Easing } from 'react-native';

export const doneAnimation = ({ height, fade }) => Animated.parallel([
  Animated.timing(height, {
    toValue: 300,
    easing: Easing.elastic(),
    duration: 500,
    delay: 1500,
  }),
  Animated.timing(fade, {
    toValue: 1,
    easing: Easing.ease,
    duration: 1000,
    delay: 1500,
  }),
]);

export default doneAnimation;

doneAnimation изменит состояние и выполнит описанные анимации.

...