TextInput 阻止 ScrollView 滚动

Question

我的表单比 phone 的屏幕高度还长。它是一个包含 TextInput 个组件的 ScrollView。问题是，当我想拖动开始触摸 TextInput 时，ScrollView 不会移动。如果我从空白 space（代码示例中的 View）开始拖动，它会完美滚动。

感觉 TextInput 以某种方式吞噬了 touch/drag 事件，不允许 ScrollView 进行交互。

ScrollView 看起来类似于：

function Form() {
    return (
        <ScrollView style={{ flex: 1, }}>
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <View style={{ height: 150, }} />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
            <TextInput placeholder="test" />
        </ScrollView>
    );
}

如何使滚动起作用？

更新：我注意到当我开始在空白处滚动时 space，然后我可以通过触摸输入继续滚动。但是，一旦惯性停止，我就无法再次使用输入进行滚动。

Answer 1

更新：这可能有帮助 -

会不会是 <ScrollView> 周围缺少的 <View style={{ flex: 1 }}>？

我试过了，它从内部视图和 TextInput 组件都可以很好地滚动：

 render() {
    return (
        <View style={{ flex: 1 }}>
            <ScrollView style={{ flex: 1 }} >
                <TextInput placeholder="this is a textinput with height 200" style={{ borderColor: 'brown', borderWidth: 1, height: 200 }} />
                <TextInput placeholder="this is a textinput with height 1200" style={{ borderColor: 'brown', borderWidth: 1, height: 1200 }} />
                <View style={{ height: 150, backgroundColor: 'khaki' }} />
                <TextInput placeholder="this is a textinput with height 200" style={{ borderColor: 'brown', borderWidth: 1, height: 200 }} />
            </ScrollView>
        </View>
    );
}

但是既然你说从 View 组件拖动时它会滚动，也许共享整个代码可能会揭示一些东西

Answer 2

好的，看起来这是 React Native 库 0.32 版本中的一个错误。滚动在 0.33 中按预期工作。 this commit.

解决了

Answer 3

遇到了同样的问题。事实证明，只有当 TextInput 组件被赋予隐式 height 样式时才会出现这种情况，这会强制它缩小并开始捕获滚动事件。我删除了它并通过 fontSize 和 padding 管理了我的 TextInput 尺寸，它为我解决了这个问题。

Answer 4

虽然这是一个老问题，但我遇到过同样的问题，但没有找到 public 解决方法。

在我的例子中，原因是 TextInput height 风格属性没有明确设置。没有它（或 flex: 1 设置，没关系）输入字段的 实际高度 可以 略小于其文本的高度 , 强制文本垂直滚动（即使 multiline 样式是 false，scrollEnabled 是 false，等等）。

因此，我的解决方案是显式设置最小 height 值，以使整个文本适合。

Answer 5

如此处引用：TextInput prevent scroll on ScrollView #25594 textAlign="center" 导致此问题。

添加 multiline={true} 和 style={{textAlign: "center"}} 解决问题。

TextInput 阻止 ScrollView 滚动

TextInput prevents ScrollView from scrolling

react-native

react-native-scrollview

react-native-android