我有一个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