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>
      )
  }

}

但是，因为我想在调用中获取事件对象（如上所述here），所以我无法正确实现它。由于某种原因，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>

然而，每次调用render时都会创建将render方法中的函数绑定为它的新实例的好主意。请查看此问题以获取更多详细信息：

How to avoid binding in render method

您可以在构造函数中为您的用例绑定函数

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调试器没有弹出错误或在记录器中打印错误。

反应本机 - 绑定功能不起作用

2 个答案: