长按React Native可以不断增加计数器

Question

我旁边有一个按钮TextInput，按下该按钮可增加其计数器。

   <TouchableWithoutFeedback onPress={() => {this.increaseAmount(step, rowID)}}>
      <View style={styles.amountPlusButtonContainer}>
        <Text style={styles.amountButtonText}>+</Text>
      </View>
    </TouchableWithoutFeedback>

当前，每当我点击按钮时，它就会增加1。我要实现的是只要用户按下计数器，就不断增加计数器。

我曾尝试使用它，setInterval()但我不知道确切何时停止它，也不是解决此问题的正确方法。

Answer 1

我认为使用setInterval是一个很好的解决方案。呼叫setInterval上onPressIn和clearInterval上onPressOut。

Answer 2

我能够使用AnimatedAPI 让它工作。我使用的参考（除了官方文档）是http://browniefed.com/blog/react-native-press-and-hold-button-actions/

   var ACTION_TIMER = 3000;
   var listenerActive = true;

   getInitialState(){
     return{
       pressAction: new Animated.Value(0),
       value: 0,
     };
   },
   componentWillMount: function() {
     this.state.pressAction.addListener((v) => this.setState({value: v.value}));
   },
   handlePressIn: function() {
     if(!listenerActive) {
       this.state.pressAction.addListener((v) => this.setValueAndChangeAmount(v.value));
       listenerActive = true;
     }
     Animated.timing(this.state.pressAction, {
         duration: ACTION_TIMER,
         toValue: 67,
     }).start();
   },
   handlePressOut: function() {
     this.state.pressAction.removeAllListeners();
     this.setState({pressAction: new Animated.Value(Math.ceil(this.state.value))});
     listenerActive = false;
   },

我使用 3000ms 和 Math.ceil 来保持相同的行为，onPress因为它不能与onPressIn和一起使用onPressOut。

删除侦听器会handlePressOut停止计数器。设置新值pressAction会将this.state.value值重置为计数器停止时的值。