绑定功能不起作用

Question

我正在使用此库：https：//github.com/wix/react-native-interactable可创建可相互作用的视图。

这是工作用例的示例：

import { Component }, React from 'react';
import { View } from 'react-native';
import Interactable from 'react-native-interactable';

class MainScreen extends Component {
  onDrag() {
    console.log("dragging...")
  }
  onSnap() {
    console.log("snapped!")
  }
  render() {
      return(
          <View>
              <Interactable.View
                  style={{backgroundColor: '#000000', width: 100, height: 100}}
                  horizontalOnly={true}
                  snapPoints={[{x: 0}, {x: 200}]}
                  onDrag={ () => this.onDrag() }
                  onSnap={ () => this.onSnap() }>
              </Interactable.View>
          </View>
      )
  }
}

但是，因为我想在呼叫中获取事件对象(如下所述(，所以我无法正确实施。由于某种原因，未调用Ondrag和OnSNAP功能。这是我的绑定功能的实现(这无法正常工作(：

import { Component }, React from 'react';
import { View } from 'react-native';
import Interactable from 'react-native-interactable';

class MainScreen extends Component {
  onDrag(event) {
    console.log("dragging...", event)
  }
  onSnap(event) {
    console.log("snapped!", event)
  }
  render() {
      return(
          <View>
              <Interactable.View
                  style={{backgroundColor: '#000000', width: 100, height: 100}}
                  horizontalOnly={true}
                  snapPoints={[{x: 0}, {x: 200}]}
                  onDrag={ this.onDrag.bind(this) }
                  onSnap={ this.onSnap.bind(this) }>
              </Interactable.View>
          </View>
      )
  }
}

有人知道我错过了什么？我还尝试绑定构造函数中的功能，但似乎不起作用。

Answer 1

您需要将事件对象传递给箭头函数，同时绑定

  <View>
          <Interactable.View
              style={{backgroundColor: '#000000', width: 100, height: 100}}
              horizontalOnly={true}
              snapPoints={[{x: 0}, {x: 200}]}
              onDrag={ (e) => this.onDrag(e) }
              onSnap={ (e) => this.onSnap(e) }>
          </Interactable.View>
      </View>

但是，绑定渲染方法中的函数并不是一个好主意，因为每次渲染都会创建它的新实例。检查此问题以获取更多详细信息：

如何避免在渲染方法中绑定

您可以将用例中的构造函数绑定到构造函数

class MainScreen extends Component {
  constructor(props) {
     super(props);
     this.onDrag = this.onDrag.bind(this);
     this.onSnap = this.onSnap.bind(this);
  }
  onDrag(event) {
    console.log("dragging...", event)
  }
  onSnap(event) {
    console.log("snapped!", event)
  }
  render() {
      return(
          <View>
              <Interactable.View
                  style={{backgroundColor: '#000000', width: 100, height: 100}}
                  horizontalOnly={true}
                  snapPoints={[{x: 0}, {x: 200}]}
                  onDrag={ this.onDrag }
                  onSnap={ this.onSnap }>
              </Interactable.View>
          </View>
      )
  }
}

Answer 2

我意识到它不起作用的原因是因为打印console.log("dragging...", event);导致错误导致应用程序崩溃并停止工作。

简单的修复是不直接打印对象事件。当我尝试打印event.nativeEvent.state时，代码正在工作。但是，这是唯一的错误，我不确定为什么React Native调试器没有弹出错误或在记录器中打印错误。