KeyboardAvoidingView с ScrollView

Я как бы новый, чтобы отреагировать на родной язык, и у меня есть один вопрос, который я не нашел в соответствующей документации.

Я рассматриваю этот компонент KeyboardAvoidingView: https://facebook.github.io/react-native/docs/keyboardavoidingview.html

Вопрос прост: кто-нибудь может заставить KeyboardAvoidingView работать с ScrollView? У меня много TextInputs в одном компоненте (сумма высоты TextInputs больше, чем высота устройства), и как только клавиатура появляется, у меня есть различные проблемы.
Если я использую View вместо ScrollView все будет хорошо, но я не могу его использовать, так как мне нужно больше места, чем высота устройства. Я ничего не могу найти о прокрутке в документации KeyboardAvoidingView.

Благодарю.

Ответы

Ответ 1

Для тех, кто хочет решить эту проблему, это работает и автоматически прокручивает фокус ввода. Я попробовал это на выставке, надеюсь, это поможет.

<KeyboardAvoidingView style={{ flex: 1, flexDirection: 'column',justifyContent: 'center',}} behavior="padding" enabled   keyboardVerticalOffset={100}>
    <ScrollView>
        <View style={Styles.row}>
                //your view
        </View>
    </ScrollView>
</KeyboardAvoidingView>

Ответ 2

Похоже, Facebook еще не реализовал решение для scrollViews. Но я нашел решение, сделанное Wix, которое работает так, как должно :)

Ответ 3

Я также пытался найти решение в Интернете, но сам это понял. Я смог сделать keyboardAvoidingView для работы с ScrollView на симуляторе iPhone SE.

Я использовал position типа заполнения, с keyboardVerticalOffset установленной на некоторое более высокое значение. Надеюсь, это поможет всем, кто попал в эту ситуацию.

 render() {
    return (
    <View style={…..}>
        <ScrollView>
                <KeyboardAvoidingView style={{ flex: 1 }}
                keyboardVerticalOffset={100} behavior={"position"}>
                <TextInput style={styles.editInput} …./>

            </KeyboardAvoidingView>
        </ScrollView>
    </View>
)}

Ответ 4

В моем случае я использовал: https://github.com/APSL/react-native-keyboard-aware-scroll-view.

<KeyboardAwareScrollView>
  ....
  <MyContainerComponent>
    ....
    <MyFormComponentWithInputs />
  </MyContainerComponent>
</KeyboardAwareScrollView>

Он также поддерживает более старые версии RN.

Мой текстовый ввод был где-то глубоко скрыт, это какой-то пользовательский дочерний компонент ScrollView, но пакет отлично работал как для Android, так и для iOS

Ответ 5

Я столкнулся с той же проблемой, хотя у меня был другой подход, который в основном будет вычислять и позиционировать (используя translateY) представление при появлении клавиатуры.

Я опубликовал решение о gitub и NPM- реакции-native-spacer.