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;
2条答案
按热度按时间5sxhfpxr1#
RN库本身似乎有一个bug,在我们的项目中,我只是用我提交给RN的PR中你也能找到的修改来修补库。
https://github.com/facebook/react-native/pull/34749
这样可以确保在切换键盘时正确计算高度。
mcdcgff02#
下面是我目前对这个问题的解决方案:
android.softwareKeyboardLayoutMode: "resize"
(文档:https://docs.expo.dev/versions/latest/config/app/#softwarekeyboardlayoutmode),而且我根本没有使用任何避免键盘的解决方案。根据我的经验,Android处理文本输入的方式开箱即用。KeyboardAvoidingView
和behavior: "padding"
,这对所有键盘都很好用(包括Emoji)。请小心behavior: "height"
-它目前在RN 0. 7. 5(https://github.com/facebook/react-native/issues/35764)中有bug下面是我的代码:
也请看一个伟大的文章解释键盘避免iOS,Android在不同情况下https://www.netguru.com/blog/avoid-keyboard-react-native的现代方法