react-native - react 原生中 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和 gestureState作为参数。例如，您可以在自定义逻辑中使用它们。

下面是一个例子:

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

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