TextInput防止ScrollView滚动

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>
    );
}

我怎样才能让卷轴工作呢？

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

Answer 1

好的，看起来这是React本机库的0.32版本中的一个bug。滚动工作如预期在0.33。这一问题由此承诺解决。

Answer 2

正如这里所引用的：TextInput防止在ScrollView #25594上滚动 textAlign="center"导致了这个问题。

使用multiline={true}添加style={{textAlign: "center"}}可以解决这个问题。

Answer 3

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

会不会是丢失的<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组件拖动时它会滚动，所以共享整个代码可能会显示一些东西