React Native KeyboardAvoidingView无法从键盘选择表情符号

mspsb9vt  于 2023-01-05  发布在  React
关注(0)|答案(2)|浏览(348)

KeyboardAvoidingView在从虚拟键盘选择表情符号时覆盖TextInput UI。
这是一个示例代码,KeyboardAvoidingView在这种情况下可以很好地从虚拟键盘输入文本。但是,在切换到虚拟键盘中的表情符号选择器时,自动调整的padding | height没有效果,TextInput被虚拟键盘覆盖。

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

const KeyboardAvoidingComponent = () => {
  return (
    <KeyboardAvoidingView
      behavior={Platform.OS === "ios" ? "padding" : "height"}
      style={styles.container}
    >
      <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
        <View style={styles.inner}>
          <Text style={styles.header}>Keyboard Avoiding View</Text>
          ...
          <FlatList 
          ...
          <TextInput placeholder="Username" style={styles.textInput} />
        </View>
      </TouchableWithoutFeedback>
    </KeyboardAvoidingView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1
  },
  inner: {
    padding: 24,
    flex: 1,
    justifyContent: "space-around"
  },
  header: {
    fontSize: 36,
    marginBottom: 50
  },
  textInput: {
    height: 40,
    borderColor: "#000000",
    borderBottomWidth: 1,
    marginBottom: 36
  },
});

export default KeyboardAvoidingComponent;
5sxhfpxr

5sxhfpxr1#

RN库本身似乎有一个bug,在我们的项目中,我只是用我提交给RN的PR中你也能找到的修改来修补库。
https://github.com/facebook/react-native/pull/34749
这样可以确保在切换键盘时正确计算高度。

mcdcgff0

mcdcgff02#

下面是我目前对这个问题的解决方案:

  • 在Android上,我使用Expo默认值android.softwareKeyboardLayoutMode: "resize"(文档:https://docs.expo.dev/versions/latest/config/app/#softwarekeyboardlayoutmode),而且我根本没有使用任何避免键盘的解决方案。根据我的经验,Android处理文本输入的方式开箱即用。
  • 在iOS上我使用KeyboardAvoidingViewbehavior: "padding",这对所有键盘都很好用(包括Emoji)。请小心behavior: "height"-它目前在RN 0. 7. 5(https://github.com/facebook/react-native/issues/35764)中有bug

下面是我的代码:

React.createElement(Platform.OS === 'ios' ? KeyboardAvoidingView : View, {
    style: container,
    behavior: "padding" // for ios KeyboardAvoidingView
},
... // children
)

也请看一个伟大的文章解释键盘避免iOS,Android在不同情况下https://www.netguru.com/blog/avoid-keyboard-react-native的现代方法

相关问题