Ошибка при использовании useNativeDriver в React Native Animated

Когда я использую useNativeDriver в React Native Animated

state = {
    chevronUp: new Animated.Value(-50),
};

Animated.spring(this.state.chevronUp, {
    toValue: 50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

и визуализировать

<Animated.View style={{bottom: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>

эти ошибки дают мне

Свойство стиля 'bottom' не поддерживается встроенным анимированным модулем.

а также

Невозможно вызвать setState (или forceUpdate) на отключенном компоненте. Это не работает, но указывает на утечку памяти в вашем приложении. Чтобы исправить, отмените все подписки и асинхронные задачи в методе componentWillUnmount.


react-native animation react-animated
person Mahdi Bashirpour    schedule 25.06.2018    source источник
comment
К какому свойству вы применяете эту анимацию? Можете ли вы добавить образец кода и контекст, показывающий, где вы это используете? Не все свойства можно анимировать ...   -  person Joel    schedule 25.06.2018
comment
Не могли бы вы рассказать, где этот код анимации работает в жизненном цикле компонента?   -  person gran33    schedule 25.06.2018
comment
Здесь та же ошибка, вы когда-нибудь находили решение?   -  person cheesus    schedule 09.04.2019

Ответы (2)


arrow_upward
6
arrow_downward

вам нужно использовать свойство "translateY" вместо "bottom", которое поддерживается встроенным драйвером, поэтому ваше начальное значение будет выглядеть так:

state = {
    chevronUp: new Animated.Value(50),
}

Animated.spring(this.state.chevronUp, {
    toValue: -50,
    friction: 5,
    useNativeDriver: true,  // <----- this line
}).start();

и в методе рендеринга:

<Animated.View style={{translateY: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>
person Alireza Noori    schedule 11.04.2019

arrow_upward
2
arrow_downward

Эта ошибка возникает из-за nativeAnimatedHelper.js#L219"> > внутри библиотеки React Native. Вы можете проверить TRANSFORM_WHITELIST в NativeAnimatedHelper для свойства, поддерживаемого анимированным модулем.

В настоящее время поддерживаются эти реквизиты.

const TRANSFORM_WHITELIST = {
  translateX: true,
  translateY: true,
  scale: true,
  scaleX: true,
  scaleY: true,
  rotate: true,
  rotateX: true,
  rotateY: true,
  rotateZ: true,
  perspective: true,
};

Здесь лучше использовать translateY вместо bottom.

<Animated.View style={{translateY: this.state.chevronUp,position: "absolute", right: 20, width: 50, height: 50}}>
     <Icon name="chevron-up" size={28} color="#666"/>
</Animated.View>
person RY_ Zheng    schedule 08.03.2020
comment
Если у меня есть несколько входов, следует ли объявлять несколько переменных для каждой позиции? - person Oliver D; 21.09.2020
comment
извини не могу тебя понять - person RY_ Zheng; 22.09.2020