14

我有一个比手机屏幕高度长的表格。它是一个ScrollView包含TextInput组件。问题是当我想在 a 上拖动开始触摸时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>
    );
}

我怎样才能使滚动工作？

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

4

5 回答 5

1

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

于 2017-01-31T14:54:05.053 回答
1

面临同样的问题。事实证明，只有在TextInput组件被赋予隐式height样式时才会出现这种情况，这会迫使它缩小并开始捕获滚动事件。我删除了它并通过它管理了我的尺寸TextInput，它为我解决了这个问题。fontSizepadding

于 2019-05-12T15:54:41.350 回答
1

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

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

于 2021-05-21T15:58:12.467 回答
0

更新：这可能会有所帮助-当焦点文本输入反应本机时，滚动视图无法滚动

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

我试过了，它从内部 View 和 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 组件中拖动时会滚动，那么共享整个代码可能会揭示一些东西

于 2017-01-20T04:04:30.680 回答
0

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

在我的情况下，原因是TextInput height样式属性未明确设置。没有它（或flex: 1设置，没关系），输入字段的实际高度可能会略低于它的 text 的高度，迫使文本垂直滚动（即使multilinestyle is false，scrollEnabledisfalse等）。

所以，我的解决方案是明确设置height让整个文本适合的最小值。

于 2020-08-29T09:13:38.430 回答