反应原生的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将获得焦点.