TextInput 防止 ScrollView 滚动答案

【问题标题】：TextInput prevents ScrollView from scrollingTextInput 防止 ScrollView 滚动
【发布时间】：2017-01-19 14:24:40
【问题描述】：

我有一个长于手机屏幕高度的表格。它是一个 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>
    );
}

我怎样才能使滚动工作？

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

【问题讨论】：

在react-native: 0.47.2仍然发生
在react-native: 0.60仍然发生
这里引用：TextInput prevent scroll on ScrollView #25594 textAlign="center" 导致这个问题。

标签： react-native react-native-android react-native-scrollview

【解决方案1】：

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

【讨论】：

0.39.2也有同样的问题。
如果可以，请尝试升级到最新版本。你落后了十个版本：/
还是不行，textInput 本身有一个可见的滚动

【解决方案2】：

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

【讨论】：

【解决方案3】：

这里引用的是：TextInput prevent scroll on ScrollView #25594 textAlign="center" 导致这个问题。

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

【讨论】：

【解决方案4】：

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

会不会是缺少的 <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 组件拖动时它会滚动，那么共享整个代码可能会揭示一些东西

【讨论】：

谢谢，但添加 View 没有帮助。

【解决方案5】：

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

在我的情况下，原因是在 TextInput height 样式属性 not 被明确设置。没有它（或者设置了flex: 1，没关系），输入字段的实际高度可能略小于其文本的高度，从而强制文本垂直滚动（尽管multiline 样式是false，scrollEnabled 是false，等等）。

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

【讨论】：