Блог

У меня есть оранжевое представление размером 300×300, которое может получать события панорамирования с помощью PanResponder. У меня есть 100 кругов, которые можно перемещать вместе в этом представлении. Каждый круг отображается в моем компоненте «Узел» при вызове onPanResponderMove.

Код подходит для одного круга, но когда их становится 100, он отстает. При быстром панорамировании может возникнуть задержка до 2 секунд после отпускания касания, когда круги продолжают рисоваться.

 import React from 'react';
import {View, PanResponder} from 'react-native'

class App extends React.Component {
    render(){
        return <ReactSurface />
    }
}

class ReactSurface extends React.Component {

    constructor (props){
        super(props)
        console.log('ReactSurface constructor')

        this.onTouchStart = this.onTouchStart.bind(this)
        this.onTouchMove = this.onTouchMove.bind(this)
        this.onTouchEnd = this.onTouchEnd.bind(this)

        this.panResponder = PanResponder.create({
            onStartShouldSetPanResponder: () => true,
            onMoveShouldSetPanResponder: () => true,
            onPanResponderStart: this.onTouchStart,
            onPanResponderMove: this.onTouchMove,
            onPanResponderRelease: this.onTouchEnd,
        })

        this.coordinates = []
        for(let i = 0; i < 100; i  ){
            this.coordinates.push(2*i)
        }

        this.state = {
            xAxisY: 0,
            yAxisX: 0,
        }
    }

    onTouchStart(){
        console.log('onTouchStart')
        this.startYAxisX = this.state.yAxisX
        this.startXAxisY = this.state.xAxisY
    }

    onTouchMove(e, gestureState) {
        console.log('onTouchMove')
        this.setState({
            yAxisX: this.startYAxisX   gestureState.dx,
            xAxisY: this.startXAxisY   gestureState.dy
        })
    }

    onTouchEnd() {
        console.log('onTouchEnd')
    }

    render(){
        return(<View 
            {...this.panResponder.panHandlers}>

            <View style={{
                backgroundColor: 'orange',
                position: 'absolute',
                width:300,
                height:300,
                }}>

                <AllNodes 
                    xAxisY={this.state.xAxisY}
                    yAxisX={this.state.yAxisX}
                    nodeRad={25}
                    coordinates={this.coordinates}/>

            </View>      
        </View>)
    }
}

const AllNodes = props => {
    return props.coordinates.map((value, index) => {
        return <Node key={index}
            rawX={value} rawY={value}
            yAxisX={props.yAxisX} xAxisY={props.xAxisY}
            nodeRad={props.nodeRad}/>
    })
}

const Node = props => {
    return <View style={{
        position: 'absolute',
        top: props.xAxisY   props.rawY - props.nodeRad,
        left: props.yAxisX   props.rawX - props.nodeRad,
        width: 2*props.nodeRad,
        height: 2*props.nodeRad,
        borderRadius: props.nodeRad,
        borderWidth: 1,
    }}/>
}

export default App
  

Как я могу сделать свой PanResponder значительно быстрее?

Примечание: Если я не смогу, я подумываю о переходе на фреймворк Flutter, поскольку он эффективен при рисовании.

Редактировать: вот ссылка на видео панорамирования на react-native и flutter https://drive.google.com/open?id=1OgvHkf56Ru_I1NVooIrqby1hy5WtSIVR