Могу ли я вызвать анимацию компонента Switch React Native при изменении его состояния, когда пользователь не нажимает на него напрямую?

Question

В моем проекте React Native я использую компонент Switch. Его можно переключать напрямую, нажимая его, но я также хочу позволить пользователю изменить его, нажав рядом связанные элементы.

Это, конечно, оживляет переключение при нажатии, но когда я изменил его состояние с помощью setState() он просто переходит прямо в другую позицию без анимации.

Есть ли способ, которым я могу программно вызвать анимацию при изменении ее состояния из кода?

(Есть вопрос с похожей формулировкой, но, похоже, это не связанная с этим проблема, которую я не могу решить.)

Answer 1

Вы пробовали сторонние библиотеки вроде этого; Переключение материала Существует OnChangeState(), я надеюсь, что это будет работать с анимацией.

Другие ссылки, которые могут быть полезны: Switch Pro

Answer 2

Немного зависит от подхода, который вы выбираете, но я бы сказал, что ваш лучший выбор - это Animated (который является частью React Native).

Вы можете сделать что-то вроде этого:

render(){
    var animVal = new Animated.Value(0);   
    Animated.timing(animVal, {toValue: 1, duration: 300}).start();
    var animatedViewStyles =
        {
             marginLeft: animVal.interpolate({
                 inputRange: [0, 1],
                 outputRange: this.state.switchOn ? [100, 0] : [0, 100],
             }),
             // add some other styles here
             color: 'green'
        };
    }

    return (
        <Animated.View style={animatedViewStyles}>
            <TouchableHighlight onPress(() => this.setState({switchOn: !this.state.switchOn}))><Text>This is my switch</Text></TouchableHighlight>
        </Animated.View>
    );

См. Документы https://facebook.github.io/react-native/docs/animated.html для получения дополнительной информации.