scrollview не может прокручиваться, когда текстовый ввод фокуса реагирует на родной

У меня есть TextInput внутри ScrollView.

Прокрутка не работает, когда TextInput находится в фокусе. Эта проблема касается только Android.


react-native android-edittext scrollview textinput react-native-scrollview
person user2427293    schedule 28.09.2016    source источник
comment
Вам удалось решить эту проблему?   -  person Craig Wilkinson    schedule 28.11.2017
comment
У меня была проблема с этим, и оказалось, что это было из-за того, что я указывал высоту в стилях для TextInput, но содержимое TextInput превышало эту высоту в Android, но не в iOS (поскольку системные шрифты переопределяли мой шрифт стили). Если кто-то еще столкнется с этим, это можно исправить, удалив жестко закодированную высоту или увеличив ее, чтобы гарантировать, что она может содержать контент без переполнения.   -  person Craig Wilkinson    schedule 28.11.2017

Ответы (5)


arrow_upward
8
arrow_downward

параметр

<ScrollView keyboardShouldPersistTaps="always"

в сочетании с компонентом textInput ниже (пользовательский компонент, который я создал для ввода текста для решения этой проблемы) решил мою проблему:

<TouchableOpacity
     activeOpacity={1}
     onPress={()=>this.input.focus()}>
     <View pointerEvents="none"
           <TextInput
              ref = {(input) => this.input = input}
           />
     </View>
</TouchableOpacity>
person Mahdieh Shavandi    schedule 03.03.2019
comment
Предупреждение: этот метод эффективно отключает выделение текста, поэтому пользователи не могут копировать/вставлять или помещать курсор в середину текста. - person David Jones; 21.09.2019
comment
@DavidJones точно, в этом проблема. Вы нашли какое-либо решение для этого? - person Mahdieh Shavandi; 22.09.2019
comment
(Извините, это не позволит мне @ упомянуть ваше имя пользователя, поэтому, надеюсь, вы это видите.) В моем случае это было вызвано выравниванием входного текста — проблема возникает, когда текст выравнивается по центру или по правому краю. . Это известная ошибка: (см. github.com/facebook/react-native/issues/ 25594 и github.com/facebook/react-native/issues/25594< /а>). Единственный известный мне обходной путь — установить multiline={true}. - person David Jones; 23.09.2019
comment
Не могли бы вы взглянуть на это, пожалуйста? stackoverflow.com/questions/63437251/ - person Jnl; 19.08.2020
comment
@Jnl Я предоставил вам решение. посмотрите и дайте мне знать, если ваша проблема решена - person Mahdieh Shavandi; 20.08.2020

arrow_upward
2
arrow_downward

В scrollView используйте keyboardShouldPersistTaps

<ScrollView keyboardShouldPersistTaps="handled">

это решит вашу проблему

проверьте документы здесь https://facebook.github.io/react-native/docs/scrollview.html#keyboarddismissmode

person Man    schedule 08.03.2018
comment
К сожалению, это не решает проблему на Android. - person David Jones; 21.09.2019
comment
Не могли бы вы взглянуть на это, пожалуйста? stackoverflow.com/questions/63437251/ - person Jnl; 19.08.2020

arrow_upward
0
arrow_downward

Это очень хороший пример: http://blog.arjun.io/react-native/mobile/cross-platform/2016/04/01/handling-the-keyboard-in-react-native.html

Для меня было очень важно добавить:

android:windowSoftInputMode="adjustResize"

в AndroidManifest.xml, чтобы сфокусировать textInput

person Eliza Elizel    schedule 18.11.2016

arrow_upward
0
arrow_downward

Я по-разному обрабатываю каждую платформу (в Ios достаточно фокуса на inputText, не забудьте поместить this.scrollViewRef ref внутри ScrollView, который обернет inputText и поместит ref, индексирующий inputText

if (Platform.OS == 'android') {
    this.inputRefs[field].measure((w, h, px, py, xPage, yPage) => {
        this.scrollViewRef.scrollTo({ x: 0, y: yPage, animated: true })
        this.inputRefs[field].focus()
    })
} 
this.inputRefs[field].focus()
person Idan    schedule 27.11.2019

arrow_upward
0
arrow_downward

Это ожидаемое поведение.

Для получения дополнительной информации официальная документация по TextInput

Вы можете попробовать что-то вроде этого: react-native-kayboard-aware -scroll-view

person octohedron    schedule 28.09.2016