键盘避免文本输入无法正常工作 - React Native答案

【问题标题】：Keyboard avoid text Input does not work properly - React Native键盘避免文本输入无法正常工作 - React Native
【发布时间】：2022-06-26 03:11:34
【问题描述】：

我试图在屏幕底部放置一个输入，当我点击时，我希望它位于键盘上方。我正在使用世博会。我尝试了两种情况：

app.json 文件中没有“softwareKeyboardLayoutMode”：“pan”配置。在这种方法中，它可以正常工作，期望它也可以将键盘上方的底部标签栏移动，所以它对我不起作用。为此，我尝试了

screenOptions={{
                tabBarHideOnKeyboard: 'true'
            }}

标签栏中的配置，但运行不顺畅，如果我尝试为底部标签栏添加自定义组件，它也将无法运行。

使用“softwareKeyboardLayoutMode”：“pan”。通过这种方法，底部的标签栏被隐藏了，它最终会起作用，但表现得很奇怪。当我专注于文本输入时，它会打开键盘，将输入移到上方太多，然后将其返回到键盘的正上方（到它应该在的位置）。我已经尝试对我的代码进行一些更改，但最终无法找到任何解决方案。请尝试代码，您会看到的。

这是我的代码：

NewComp.js：

const NewComp = () => {
    return (
        <KeyboardAvoidingView
            behavior={"height"}
            style={{ flex: 1 }}
        >
            <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
                <View style={{
                    padding: 24,
                    flex: 1,
                    justifyContent: "flex-end"
                }}>
                    <TextInput placeholder="Username" style={{
                        height: 40,
                        borderColor: "#000000",
                        borderBottomWidth: 1,
                    }}/>
                </View>
            </TouchableWithoutFeedback>
        </KeyboardAvoidingView>
    );
};

BottomNavigator.js：

const BottomNavigator = ({ navigation, route }) => {

   return (
       <Tab.Navigator>
           <Tab.Screen key={1} name={'TAB_1'} component={NewComp} options={{header: () => null}}/>
           <Tab.Screen key={2} name={'TAB_2'} component={NewComp} options={{header: () => null}} />
           <Tab.Screen key={3} name={'TAB_3'} component={NewComp} options={{header: () => null}} />
       </Tab.Navigator>
   );
}

【问题讨论】：

标签： javascript react-native input keyboard

【解决方案1】：

你试过这个文档KeyboardAvoidingView 吗？我可以设置内容的位置是在键盘上方还是在键盘后面

【讨论】：