Question

我有一个300x300的橙色视图，可以使用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框架，因为它可以有效地进行绘制。

编辑：这是指向本机和颤动声相的视频的链接 https://drive.google.com/open?id=1OgvHkf56Ru_I1NVooIrqby1hy5WtSIVR

反应本机PanResponder慢

0 个答案: