React-Native: LayoutAnimation

Question

React-Native: LayoutAnimation

Я использую LayoutAnimation react-native для реализации пользовательского компонента switch.

Я анимирую движение круга с помощью LayoutAnimation следующим образом:

componentWillUpdate() {

  let switchAnimation = {

    duration: 250,

     update: {

       type: LayoutAnimation.Types.linear,

       property: LayoutAnimation.Properties.opacity,

     },

  };

  LayoutAnimation.configureNext(switchAnimation);

}

Коммутатор-это его собственный компонент. Он получает реквизит, чтобы установить круг слева или справа с помощью css (justifyContent flex-start или flex-end)

На мой взгляд, проблема заключается в том, что при изменении значения переключателя меняются и другие компоненты: а именно, когда переключатель хит:

1) переключение изменений

2) значок меняется

3) некоторые изменения текста

Все вышеперечисленное одушевлено. Я хочу уменьшить анимацию, чтобы повлиять только на переключатель

UPDATE : я пытался использовать анимированный API, но он, похоже,не поддерживает анимацию свойств flex. Неужели там действительно нет никого, кто широко использует анимированный API?

518 2

react-native

2 ответов:

Comments

Ничего не найдено.

Ayodeji Agboola · Accepted Answer · 2017-03-31 18:32:57

LayoutAnimation делает многое под капотом. Если вы не хотите пройти через Источник, вы можете установить и изменить значение поля, чтобы переместить круг в контейнере. Вы можете выполнить все вычисления внутри компонента и выставить некоторые стили в качестве реквизитов.

Beau Smith · Accepted Answer · 2018-10-05 17:50:03

Эта проблема вызвана тем, что используется неправильное анимационное решение.

Для анимации конкретного элемента используйте Animated API, а не LayoutAnimation API.

Узнайте больше о различиях в руководстве по анимации .

Я узнал об этом отличии при попытке анимировать индикатор выполнения с помощью свойства flex со значением в диапазоне от 0 до 1.

Вот пример кода, отредактированного для удаления неизданного специфика проекта ...
import React from 'react'
import { Animated, View } from 'react-native'
const progressStyles = {
  height: 10,
  backgroundColor: 'blue',
}
class PasswordStrengthMeter extends React.Component {
  state = {
    width: new Animated.Value(0), // value in the range 0–1
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.score !== this.props.score) {
      Animated.timing(this.state.width, {
        toValue: nextProps.score / 4, // score will be a value between 0-4
        duration: 500,
      }).start()
    }
  }
  render() {
    return (
      <View>
        <Animated.View
          style={[
            progressStyles,
            {
              flex: this.state.width, // value in the range 0–1
            },
          ]}
        />
      </View>
    )
  }
}