react-native - 在react-native中的TextInput上进行PanResponder

我在React-native上面临一个问题。我的TextInput占据了整个屏幕。我想在用户向上或向下滑动时更改此文本输入的内容。为此，我使用了PanResponder。

问题是PanResponder夺走了TextInput的焦点:当我单击TextInput时，键盘没有出现，并且我无法更改其值。

有没有办法让PanResponder和Textinput共存，以便轻按将集中在TextInput上，而滑动仍会触发PanResponder回调？

我将代码减少到了重现此问题所需的最低限度:

export default class EditNoteScreen extends Component {
  componentWillMount() {
    this.panResponder = PanResponder.create({
      onStartShouldSetPanResponder: () => true,
      onStartShouldSetPanResponderCapture: () => true,
      onMoveShouldSetResponderCapture: () => true,
      onMoveShouldSetPanResponderCapture: () => true
    });
  }

  render() {
    return (
      <View style={stylesNote.editScreen} {...this.panResponder.panHandlers}>
        <View style={stylesNote.editScreenContent}>
          <TextInput style={stylesNote.editScreenInput}>
            Hello
          </TextInput>
        </View>
      </View>
    );
  }
}

样式:

  editScreen: {
    flex: 1
  },

  editScreenContent: {
    flex: 5
  },

  editScreenInput: {
    flex: 1,
    borderColor: "transparent",
    paddingLeft: 20,
    paddingRight: 10
  }

最佳答案

是的，PanResponder和TextInput可能共存。您的问题是您总是从装卸商处返回true。这意味着装卸商会获得关注。

例如，我希望我的一个项目PanResponder仅在移动手指时捕获事件。但是我里面也有TouchableOpacity，所以PanResponder总是抢走了焦点。

为了解决这个问题，我使用自定义逻辑修改了onMoveShouldSetPanResponderCapture函数，但并不总是返回true。因此，在您的情况下，我不知道您在做什么，但是所有panhandler都将nativeEvent和gestureState作为参数。因此，您可以例如在自定义逻辑中使用它们。

这是一个例子:

onMoveShouldSetPanResponderCapture: (evt, gestureState) => Math.abs(gestureState.dy) > 5

这意味着，如果y轴运动仅超过5个像素，则响应者将获得焦点。否则，其他元素(例如TextInput)将成为焦点。

关于react-native - 在react-native中的TextInput上进行PanResponder，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44338147/