animation - 我可以在没有被用户直接按下的情况下更改其状态时使 React Native 的 Switch 组件动画吗？

Question

在我的 React Native 项目中，我使用的是 Switch 组件。可以直接按下来切换，但我也想让用户通过按下附近的相关项目来改变它。

它当然会在按下时为切换设置动画，但是当我使用它更改其状态时，setState()它只是直接跳到另一个位置而没有动画。

有没有一种方法可以在从代码更改其状态时以编程方式触发动画？

（有一个类似措辞的问题，但似乎是一个我无法解决的无关问题。）

Answer 1

取决于您采用的方法，但我想说最好的选择是使用 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。