Как изменяется вид компонента при отображении клавиатуры? - PullRequest
0 голосов
/ 18 июня 2020

Доброе утро, на самом деле это мой первый вопрос о StackOverflow после нескольких лет работы в индустрии (надеюсь, еще не поздно!).

Я работаю в качестве побочного проекта над приложением React Native. Я не понимаю, как вид меняется при поднятии клавиатуры.

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

У меня есть это изображение, показывающее, что я имею в виду с перекрывающимися представлениями:

Image showing what I meant with overlapping views

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

Как я могу сохранить свой ввод имея фиксированную высоту, но также сохраняя запас разделения при уменьшении вида ??

Большое спасибо!

Редактировать: я редактирую, потому что чувствую, что не смог на express мое представление о том, как мне это нужно для работы. (Следует ли мне удалить предыдущее объяснение? Оставить изображение, если кто-то редактирует и удаляет первое объяснение).

Первоначальный вид без клавиатуры должен быть таким:

Initial screen

Входы и кнопки должны быть внизу, чтобы вид получал всю возможную высоту.

При открытии клавиатуры (щелчком по одному из входов) я хочу, чтобы list необходимо сжать, чтобы кнопки и входы оставались видимыми и разделялись небольшим полем / заполнением, а список занимал оставшееся пространство (опять же с учетом небольшого разделения между представлениями). Список по-прежнему будет прокручиваться (это FlatList) при открытии клавиатуры.

Еще раз спасибо и извините за неправильное объяснение.

Ответы [ 2 ]

0 голосов
/ 18 июня 2020

Я думаю, вы можете попробовать что-то вроде этого:

<View>
    <ScrollView>
        <KeyboardAvoidingView style={{flex:1}} behavior={Platform.select({ios:"padding", android:null })} keyboardVerticalOffset={Platform.select({ios: 0, android: 500})}>
            {/*Your buttons and other elements here...*/}
        </KeyboardAvoidingView>
    </ScrollView>
<View>

Для этого вам также придется импортировать KeyboardAvoidingView и ScrollView из react-native.

0 голосов
/ 18 июня 2020
• 1000 прокрутите, чтобы увидеть элементы, скрытые клавиатурой.
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...