当用户不直接按下时，是否可以使React Native的开关组件在更改状态时进行动画制作？

在我的React Native项目中，我使用了Switch组件。它可以通过按下来直接切换，但我也想让用户通过按下附近的相关项目来改变它。当用户不直接按下时，是否可以使React Native的开关组件在更改状态时进行动画制作？

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

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

（有a question with a similar wording但它似乎是一个不相关的问题，我不能完全工作了。）

来源

2017-09-25 hippietrail

难道ü尝试第三方库这样的; Material Switch 有一个OnChangeState（），我希望这将适用于动画。

Oher链接，可能是有用的：Switch Pro

来源

2017-09-25 04:02:27 Vicky

我会看看那些，但我仍然希望我只是缺少标准的系统和组件。谢谢。 – hippietrail

取决于一点对你采取的办法，但我要说最好的办法是用动画（这是本机作出反应的一部分）。

你可以做这样的事情：

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。

来源

2017-09-25 19:40:23

除非我遗漏了一些东西，它似乎并不像你在这里使用[React Native Switch组件]（https://facebook.github.io/react-native/docs/switch.html）？ \ - ： – hippietrail

不，你是对的 - 我没有意识到你正在使用一个Switch组件，我以为你创建了自己的。（这可能会更容易添加动画！） –

没有原生的Switch组件已经动画。我只是不知道是否有以编程方式触发该动画的方法。我猜没有） - ： – hippietrail

当用户不直接按下时，是否可以使React Native的开关组件在更改状态时进行动画制作？

回答

相关问题