Question

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

感觉TextInput以某种方式吃了触摸/拖动事件，不允许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>
    );
}

如何进行滚动工作？

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

Answer 1

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

Answer 2

更新：这可能有所帮助 - scrollview can't scroll when focus textinput react native

可能是<View style={{ flex: 1 }}>周围缺少的<ScrollView>包裹吗？

我尝试了这个，它从内部视图和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 3

面对同样的问题。事实证明，只有在TextInput组件被赋予隐式height样式的情况下，这种情况才迫使它缩小并开始捕获滚动事件。我删除了它，并通过TextInput和fontSize管理了padding的大小，它为我解决了这个问题。

Answer 4

尽管这是一个古老的问题，但我也遇到了同样的问题，没有发现任何公共解决方法。

在我的情况下，原因是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滚动

5 个答案: