長押しでカウンターを連続的に増やす反応ネイティブ

Question

ボタンを押したときにカウンターが増加するTextInputの横にボタンがあります。

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

私は現在、ボタンをタップするたびに1ずつ増加します。私が達成したいのは、ユーザーがそれを押している限り、カウンタを増やし続けることです。

私はsetInterval()を使用しようとしましたが、いつ停止するのか正確には分かりません。

Answer 1

Animated APIを使用して動作させることができました。 （公式ドキュメントに加えて）私が使用した基準は、私はそれがonPressInとonPressOutと一緒に使用することはできませんので、onPressと同じ動作を維持するために3000msとMath.ceilを使用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; 
    }, 

ました。

handlePressOutのリスナーを削除すると、カウンタが停止します。新しいpressActionをthis.state.valueに設定すると、カウンタが停止した値にリセットされます。

Answer 2

私はsetIntervalを使用するといいと思います。 setIntervalをonPressInとし、clearIntervalをonPressOutとしてください。