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等其他元素将获得焦点。

反应原生的

1 个答案: