Вид перемещается за пределы экрана, когда текстовый ввод сфокусирован на нижнем листе в React Native для Android.

Я использую библиотеку - https://github.com/osdnk/react-native-reanimated-bottom-sheet

Я использую TextInput на этом нижнем листе. И теперь, когда текстовый ввод сфокусирован или введен, нижний лист должен оставаться в том же положении. Он отлично работает для iOS, как показано на скриншоте ниже.

введите здесь описание изображения

И когда я фокусирую ввод текста на Android, нижний лист перемещается вместе с клавиатурой, как показано на 2 снимках экрана ниже.

(Нижний лист в Android не сфокусирован)

введите здесь описание изображения

(нижний лист ориентирован на Android)

введите здесь описание изображения

Я также пытался обернуть свой нижний лист внутри KeyboardAvoidingView и соответственно его реквизита, но это не сработало.


react-native reactjs android react-native-reanimated
person Shubham Bisht    schedule 05.04.2020    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Я решил ту же проблему в своем проекте, используя Expo Kit 38.

Просто добавьте это в свой файл app.json:

"android": {
  "softwareKeyboardLayoutMode": "pan"
}

Вот как обновить приложение до Expo SDK 38.0.0 с 37.0.0:

  1. Обновите expo-cli, запустив npm i -g expo-cli
  2. Запустите expo upgrade в каталоге вашего проекта

Вы можете проверить документацию для получения более подробной информации.

person Kewal Shah    schedule 26.06.2020

arrow_upward
0
arrow_downward

Использование android:windowSoftInputMode="adjustPan" в AndroidManifest.xml сработало! :D

person Shubham Bisht    schedule 06.04.2020
comment
Я использую экспо, есть идеи? - person mleister; 04.05.2020
comment
@mleister нет, я не знаю - person Shubham Bisht; 05.05.2020

arrow_upward
0
arrow_downward

Установите экран устройства height в родительский контейнер вашего BottomSheet. Пример кода:

import BottomSheet from 'reanimated-bottom-sheet'
import { View as Container, Dimensions } from 'react-native'

const { height } = Dimensions.get('window') // Magic value.


const Screen = () => (
  <Container style={{ height }}>
    {/* Your screen content here */}
    <BottomSheet {...yourBottomSheetParams} />
  </Container>
)

export default Screen
  1. Работает в проектах Expo Managed Workflow. Хотя установка android:windowSoftInputMode="adjustPan" там невозможна.
  2. height: 100% у меня не сработало (было предложено здесь, на GitHub Bottom Sheet перемещается вверх вместе с клавиатурой в Android, а не в iOS #203).
person Yuri Z    schedule 26.05.2020