ReactNative多个摇杆操控实现

ReactNative多个摇杆操控实现

需求

• 在ReactNative中实现多个摇杆操控，即多个滑块同时响应不同手指的触控。

调研准备阶段

• 使用 GestureResponderHandlers

  • 伪代码

    ...
    
    componentWillMount() {
    
        this._gesture = {
    
            // 在用户开始触摸的时候（手指刚刚接触屏幕的瞬间），是否愿意成为响应者？
            onStartShouldSetResponder: (evt: GestureResponderEvent) => true,
            // 如果View不是响应者，那么在每一个触摸点开始移动（没有停下也没有离开屏幕）时再询问一次：是否愿意响应触摸交互呢？
            onMoveShouldSetResponder: (evt: GestureResponderEvent)=> true,
    
            // 如果View返回true，并开始尝试成为响应者，那么会触发下列事件之一
    
            // View现在要开始响应触摸事件了。这也是需要做高亮的时候，使用户知道他到底点到了哪里。
            onResponderGrant: (evt: GestureResponderEvent)=>{},
            // 用户正在屏幕上移动手指时（没有停下也没有离开屏幕）。
            onResponderMove: (evt: GestureResponderEvent)=>{},
            // 触摸操作结束时触发，比如"touchUp"（手指抬起离开屏幕）。
            onResponderRelease: (evt: GestureResponderEvent)=>{}
        };
    }
    
    ...
    
    render() {
        return (
            <View style={styles.container}