在 React Native for Android 中的底部工作表上使用文本输入时,视图移出屏幕

IT技术 android reactjs react-native react-native-reanimated
2021-04-27 15:45:05

我正在使用该库 - https://github.com/osdnk/react-native-reanimated-bottom-sheet

TextInput在这张底纸上使用了 a 现在当文本输入被聚焦或输入时,底部工作表应该保持在相同的位置。它适用于 iOS,如下面的屏幕截图所示。

在此处输入图片说明

当我将 Text Input 的焦点放在 Android 上时,底部工作表会随着键盘一起向上移动,如下面的 2 个屏幕截图所示。

(Android 中的底部工作表未聚焦)

在此处输入图片说明

(以 Android 中的底层为重点)

在此处输入图片说明

我也试过把我的底部床单KeyboardAvoidingView和它的props相应地包裹起来,但它没有用。

3个回答

我使用Expo Kit 38在我的项目中解决了同样的问题

只需将此添加到您的 app.json 文件中:

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

以下是将您的应用程序从 37.0.0 升级到 Expo SDK 38.0.0 的方法:

  1. 通过运行更新 expo-cli npm i -g expo-cli
  2. expo upgrade在你的项目目录中运行

您可能需要查看文档以获取更多详细信息

android:windowSoftInputMode="adjustPan"在 AndroidManifest.xml 中使用有效!:D

将设备屏幕设置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)。