Question

我有一个ScrollView字段，其中TextInput multiline={true}字段用作动态高度的文本区域，内容从状态读取（内部有Text字段显示文本）

我的问题是当TextInput增长到几行时，如果我通过在这个字段上滑动来滚动屏幕（我不会长按或类似的东西），该字段将触发它{ {1}}事件和键盘将显示。

它不会每次都发生，但它发生的时间足以让它变得非常烦人。

我尝试将onFocus设置为ScrollView，但没有帮助，键盘在视图滚动时仍会显示。

keyboardDismissMode="on-drag"

我也尝试在<ScrollView keyboardDismissMode="on-drag"> <TextInput multiline={true} onFocus={() => console.log('boop')}> <Text>{this.state.someText}</Text> </TextInput> </ScrollView>内没有Text字段的情况下执行此操作，TextInput仍然会启动。

我做错了吗？还有什么我可以尝试的，比如检查屏幕是否仍在滚动，onFocus字段是blur()还是类似的东西？

如果我明确地点击它，有没有办法只关注这个领域？

感谢您的帮助。

Answer 1

这是一个 hacky 解决方法：

将TextInput换成TouchableOpacity，并将TextInput的{{1}}道具设为指向状态变量，即pointerEvents ，并将变量初始化为this.state.pointerEvents。这会阻止'none'接收任何触摸事件，并允许您在其上方滑动而不会捕获焦点。

在TextInput的{{1}}道具中，通过将状态变量设置为onPress启用TouchableOpacity，然后使用对{{1}的引用手动指定焦点，即：

pointerEvents

最后，覆盖'auto'的{{1}}支柱并将TextInput状态重新初始化为this._textInput.focus()，以便在用户完成编辑后的行为与之前一样

<强>解释

这种方式的工作原理是onBlur基本上捕获了TextInput通常会消耗的所有触摸事件，但是以友好的方式与UI的其他部分进行交互。＃39; d期待它。当pointerEvents触发'none'事件时，我们真的在谈论真正的新闻事件，而不是误识别的拖累。

如果您不想使用TouchableOpacity动画，可以将TextInput道具指定给onPress，或使用TouchableOpacity代替。

Answer 2

<强>更新

再次使用0.54.2！

你应该在Android上有条件地排除这个代码（如下所述），因为现在看来React Native已经处理了这个代码。

<强>更新

不再适用于0.49.0

使用正确的TextInput将View换成panHandlers。这是一个可以做到这一点的组件：

import React, {Component} from 'react';
import {Platform, PanResponder, View, TextInput as RNTextInput} from 'react-native';

class TextInput extends Component<Props> {

  componentWillMount() {
    if (Platform.OS === 'ios') {
      this.panResponder = PanResponder.create({
        onStartShouldSetPanResponderCapture: () => true,
      });
    }
  }

  render() {
    <View {...Platform.OS === 'ios' ? this.panResponder.panHandlers : {}}>
      <RNTextInput {...this.props} />
    </View>
  }
}

在RN 0.46.1中测试。

在iOS上滚动时阻止TextInput聚焦

2 个答案: