简体   繁体   English

方向更改后,React Native KeyboardAvoidingView 无法正常工作

[英]React Native KeyboardAvoidingView not working properly after orientation changes

while trying out KeyboardAvoidingView with the Expo Go app and npm create-react-native-app on Android I noticed a weird behaviour after a device rotation.在使用 Expo Go 应用程序和npm create-react-native-app在 Android 上试用KeyboardAvoidingView时,我注意到设备旋转后出现奇怪的行为。

  1. When I launch the app in portrait mode and then switch to landscape the KeyboardAvoidingView cycles between not getting pushed up at all or not getting pushed up enough when tapping the TextInput.当我以纵向模式启动应用程序然后切换到横向时,KeyboardAvoidingView 在点击 TextInput 时根本没有被推高或没有被推得足够高之间循环。 Also, when hiding the keyboard the button stays hidden every second time.此外,当隐藏键盘时,按钮每隔两次就会保持隐藏状态。
  2. When I launch the app in landscape mode and then switch to portrait the KeyboardAvoidingView always gets pushed up way to much.当我以横向模式启动应用程序然后切换到纵向模式时,KeyboardAvoidingView 总是被推高很多。

Here is a short clip showing what happens: KeyboardAvoidingView and rotating device这是一个显示所发生情况的短片: KeyboardAvoidingView 和旋转设备

How can one prevent this from happening?如何防止这种情况发生?

Here is the code I used for create-react-native-app (I only changed the name of the component):这是我用于create-react-native-app的代码(我只更改了组件的名称):

import React from 'react';
import {
  View,
  KeyboardAvoidingView,
  TextInput,
  StyleSheet,
  Text,
  Platform,
  TouchableWithoutFeedback,
  Button,
  Keyboard,
} from 'react-native';

const App = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
      style={styles.container}>
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Header</Text>
          <TextInput placeholder="Username" style={styles.textInput} />
          <View style={styles.btnContainer}>
            <Button title="Submit" onPress={() => null} />
          </View>
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: 'space-around',
  },
  header: {
    fontSize: 36,
    marginBottom: 48,
  },
  textInput: {
    height: 40,
    borderColor: '#000000',
    borderBottomWidth: 1,
    marginBottom: 36,
  },
  btnContainer: {
    backgroundColor: 'white',
    marginTop: 12,
  },
});

export default App;

Adding keyboardVerticalOffset="-999999" fixed the issue for me.添加keyboardVerticalOffset="-999999"为我解决了这个问题。 It seems that after rotating the device the height of the keyboard in landscape- and portraitmode are added/subtracted from each other, leading to this weird behaviour.似乎在旋转设备后,键盘在横向和纵向模式下的高度会相互添加/减去,从而导致这种奇怪的行为。

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 为什么KeyboardAvoidingView在React Native中不起作用? - Why is KeyboardAvoidingView not working in React Native? 改变了键盘上的组件的位置确实显示-KeyboardAvoidingView无法正常工作-[React Native] - Change the position of a Component on keyboard did show - KeyboardAvoidingView not working - [React Native] 在 Android 上,KeyboardAvoidingView 无法正确处理 TextInput 密码字段 - KeyboardAvoidingView not working with TextInput password fields Properly on Android React Native Keyboard 涵盖 Android 上的 TextInput KeyboardAvoidingView - React Native Keyboard covers TextInput KeyboardAvoidingView on Android React Native(Expo) KeyboardAvoidingView 在 Android 中无法点击 - React Native(Expo) KeyboardAvoidingView makes unclickable in Android 使用 Expo React Native 构建后,Android APK 无法正常工作 - Android APK not working properly after build using Expo React Native 在Android上测试的React Native项目中使用KeyboardAvoidingView重叠 - Overlap using KeyboardAvoidingView in a React Native project tested in Android 在 React Native 中,如何在 iOS 中将 KeyboardAvoidingView 与 Modal 一起使用? - In React Native, How Can I Use KeyboardAvoidingView with a Modal in iOS? 如果用 ImageBackground 包装,React Native KeyboardAvoidingView 不起作用 - React Native KeyboardAvoidingView Didn't work if wrapped with ImageBackground 在react native中使用KeyboardAvoidingView时,整个内容被推高 - Whole contents are pushed up when using KeyboardAvoidingView in react native
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM