React Native Draggable - проблема при использовании таймера во время onDrag - PullRequest
Новая
       11

React Native Draggable - проблема при использовании таймера во время onDrag

0 голосов
/ 31 марта 2020

Я довольно новичок в React Native, и я буду признателен, если кто-нибудь скажет мне, почему это происходит. У меня есть TextInput, завернутый в Draggable, который отлично работает; его можно перетаскивать нормально. У меня также есть таймер setInterval, запускающий раз в секунду функцию обновления, которая устанавливает некоторое состояние. Проблема возникает, когда я использую onDrag (или onDragRelease или onRelease) внутри Draggable. Происходит следующее: я начну перетаскивать TextInput, но если во время перетаскивания функция обновления запускается и использует this.setState, координаты TextInput go вернутся в исходное положение. Если я выпущу его первым, он останется на месте. Я хочу понять, как setState мешает этому и как его обойти.

Таймер установлен здесь: 

    componentDidMount() {
        let tempTimerID = setInterval(this.updateTimer, 1000);
        this.setState({timerID : tempTimerID});
    }

Он вызывает это: 

updateTimer = () =>  {

   // There's some other stuff in here, but for simplicity I deleted it, as the only thing that
   // interferes with the Draggable is using setState on any state variable...doesn't have to be 
   // the one below, and none are directly related to the Draggable.  Without this, the problem disappears
    this.setState({timeText : "Time's Running Out!"});
}

И Draggable здесь, внутри render (): 

                    <Draggable position={this.state.textPosition}
                               minX={0} minY={0} maxX={App.screenWidth} maxY={App.screenHeight}

                               // note: I had onDrag doing some stuff here, but while trying to
                               // narrow down the problem, I took that out; the problem goes away if I
                               // don't include onDrag at all, but comes back even with an empty function
                               // triggered...
                               onDrag={() => {}}
                               >

                        <TextInput style={styles.textBox}
                                placeholder="Enter Text Here"
                                multiline={true}
                                textAlignVertical='top'
                                onTouchStart={this.turnOffScrolling}
                                onTouchEnd={this.turnOnScrolling}
                                onEndEditing={(e) => {this.setState({bottomText: e.nativeEvent.text})}}
                         />
                    </Draggable>

Я погуглил проблему и проверил здесь на stackoverflow, но не увидел ничего, что решило бы это специально. Любое понимание приветствуется, спасибо.

...