Высота против положения против заполнения в KeyboardAvoidingView "поведение"

В KeyboardAvoidingView есть свойство "поведение", например:

import { KeyboardAvoidingView } from 'react-native';

<KeyboardAvoidingView style={styles.container} behavior="padding" enabled>
    ... your UI ...
</KeyboardAvoidingView>

Можно выбрать один из трех вариантов: 'height', 'position' или 'padding'. Разница не объяснена в документации. Все, что он говорит, - то, что это не требуется, чтобы установить свойство, и имеет примечание:

Примечание. Android и iOS по-разному взаимодействуют с этим объектом. Android может вести себя лучше, когда ему вообще не дают никакой поддержки, а iOS - наоборот.

Какой эффект должны иметь эти настройки?

Ответы

Ответ 1

Я согласен, что отсутствие документации здесь расстраивает. Если вы покопаетесь в исходном коде KeyboardAvoidingView, вы найдете переключатель вокруг behavior: https://github.com/facebook/react-native/blob/92073d4a71d50a1ed80cf9cb063a6144fcc8cf19/Libraries/Components/Keyboard/KeyboardAvoidingView.js#L157

Похоже, что происходит следующее:

height

<View> возвращается со стилем, который пытается установить статическую высоту для вида, который является либо высотой экрана, либо высотой экрана минус клавиатура при наличии клавиатуры.

position

Возвращается вложенный <View>, где к внешнему представлению применяются ваши стили, а к внутреннему представлению применяется стиль bottom, который пытается соответствовать высоте клавиатуры при наличии клавиатуры.

padding

Один <View> возвращается, когда стиль paddingBottom применяется к высоте клавиатуры, если клавиатура присутствует.

Учитывая произвольные доступные опции, похоже, что при использовании KeyboardAvoidingView вы должны использовать метод проб и ошибок и проверить оба устройства на желаемый результат. Теоретически все три варианта должны работать, но, как утверждают в документации, между типами устройств есть определенный нюанс.

На мой взгляд, этот компонент следует отказаться, в пользу вспомогательных функций, которые будут возвращать высоту клавиатуры с течением времени, чтобы вы могли применять свои собственные идеи стиля непосредственно на основе видимости клавиатуры.

Ответ 2

Для ios вы можете использовать padding для behavior реквизита. Как это

<KeyboardAvoidingView behavior="padding" style={{flex: 1}}>
...
</KeyboardAvoidingView>

Для Android лучше без реквизита behavior.