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

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

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

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

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


react-native animation react-native-component
person hippietrail    schedule 25.09.2017    source источник

Ответы (1)


arrow_upward
-1
arrow_downward

Немного зависит от выбранного вами подхода, но я бы сказал, что лучше всего использовать 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 для получения дополнительной информации.

person Gee    schedule 25.09.2017
comment
Если я что-то не упустил, похоже, вы используете React Родной компонент Switch вообще здесь? \-: - person hippietrail; 26.09.2017
comment
Нет, вы правы — я не знал, что вы используете компонент Switch, я думал, что вы создали свой собственный. (Что может быть проще для добавления анимации!) - person Gee; 27.09.2017
comment
Нет, этот собственный компонент Switch уже анимируется. Я просто не знал, есть ли способ программно запустить эту анимацию. Я думаю, что нет )-: - person hippietrail; 27.09.2017
comment
Да, я совершенно неправильно это прочитал. Он использует UISwitch (developer.apple.com/documentation/uikit/uiswitch) под hood, который поддерживает его, но не похоже, что была настроена явная ссылка. Исходный код коммутатора RN находится здесь github. .com/facebook/react-native/blob/ — он использует RCTSwitch, который является оболочкой для UISwitch, но я не уверен, что есть способ запустить нужную вам функцию на UISwitch. - person Gee; 27.09.2017
comment
Да, я просмотрел код, обертывающий iOS или Android, но я никогда не кодировал их напрямую, поэтому не вникал в него полностью, но пришел к тому же выводу, что и вы. Спасибо! - person hippietrail; 28.09.2017
comment
@hippietrail FWIW, мы также пришли к выводу, что нет простого способа программно анимировать переключатель. - person Freewalker; 13.04.2018