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

Как я могу заставить прокрутку работать?

Обновление: я заметил, что когда я начинаю прокручивать пустое пространство, я могу продолжать прокручивать, касаясь входов. Однако, как только инерция прекратится, я не смогу снова прокрутить входы.

Answer 1

Хорошо, похоже, это ошибка в версии 0.32 библиотеки React Native. Прокрутка работает как и ожидалось в 0.33. Это было решено этим коммитом.

Answer 2

Столкнулся с той же проблемой. Оказывается, это только в том случае, еслиTextInput компоненту дается неявный heightstyle, который заставляет его сжиматься и начинает захватывать события прокрутки. Я удалил его и управлял своимTextInput размер через fontSize а также padding и это решило эту проблему для меня.

Answer 3

Как здесь цитируется:TextInput предотвращает прокрутку в ScrollView #25594 textAlign="center" вызывает эту проблему.

Добавление multiline={true} с участием style={{textAlign: "center"}} решить проблему.

Answer 4

Хотя это старый вопрос, я столкнулся с той же проблемой и не нашел общедоступного решения.

В моем случае причина была в TextInput heightсвойство стиля не задано явно. Без него (или сflex: 1установить, неважно) фактическая высота поля ввода может быть немного меньше, чем высота его текста, заставляя текст прокручиваться по вертикали (даже еслиmultiline стиль false, scrollEnabled является false, так далее.).

Итак, мое решение - явно установить минимальный height значение, которое позволит уместить весь текст.

Answer 5

Обновление: это может помочь - просмотр прокрутки не может прокручиваться, когда фокус ввода текста реагирует на нативный

Может ли это быть пропавшим без вести <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, возможно, общий доступ ко всему коду может показать что-то