反应原生的TextInput上的PanResponder

Question

我在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
  }

Answer 1

是的， PanResponder和TextInput可能共存。 你的问题是，你总是返回true从你的乞丐。 这意味着乞丐得到了关注。

例如，我希望PanResponder一个项目只在移动手指时捕获事件。 但我也有TouchableOpacity里面也因此PanResponder总是偷的焦点。

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

这是一个例子：

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

这意味着如果y轴移动仅超过5个像素，则panresponder将获得焦点。 否则，其他元素（例如TextInput将获得焦点。