React Native：我按文本输入，出现键盘，并且在使用Keyboard.addListener时自动将其关闭

问题描述

我试图在键盘出现时从屏幕上删除视图，以便所有内容都适合屏幕。

首次关闭键盘后-注释了keyboardDidHide代码-不会自动将其再次关闭。

这是代码的代码部分。我正在使用Formik作为表格。

我在做什么错了？

  const [keyboardUp,setKeyboardUp] = React.useState(false);

  Keyboard.addListener("keyboardDidShow",_keyboardDidShow);
  Keyboard.addListener("keyboardDidHide",_keyboardDidHide);
  
  
  React.useEffect(() => {
      Keyboard.addListener("keyboardDidShow",_keyboardDidShow);
      Keyboard.addListener("keyboardDidHide",_keyboardDidHide);

      // cleanup function
      return () => {
        Keyboard.removeListener("keyboardDidShow",_keyboardDidShow);
        Keyboard.removeListener("keyboardDidHide",_keyboardDidHide);
      };
    },[]);

    const _keyboardDidShow = () => {
      setKeyboardUp(true);
    };

    const _keyboardDidHide = () => {
      setKeyboardUp(false);
    };


  const LoginForm=()=>{
    let input_height=40;
    
    return (
          <Formik 
            style={{ backgroundColor:"blue" }}
            initialValues={{email:'',password:''}}
            onSubmit={(values)=> {

              let username = values.email;
              let p = values.password;
              
              signIn({ username,p })
            
            }}
            >
          
              {(props)=>(
                <View style={{width:"100%",height:"45%",justifyContent:"center",alignItems:"center"}}>

                    <TextInput style={{width:"75%",borderColor: "#1d3557",borderWidth:1,height:input_height,margin:"2%",paddingLeft:"3%",backgroundColor:"white",borderColor:"grey",borderRadius:8}}
                               placeholder='email' onChangeText={props.handleChange('email')} value={props.values.title} />

                    <TextInput style={{width:"75%",borderRadius:8}}
                               placeholder='password' onChangeText={props.handleChange('password')} value={props.values.password} />
                

                  <TouchableOpacity style={{backgroundColor:"#008b9a",marginTop:"8%",alignItems:"center",width:"75%",height:40,borderRadius:16}} 
                                    onPress={props.handleSubmit}>
                      <Text style={{fontSize:16,fontWeight:"bold"}}>LOGIN</Text>
                  </TouchableOpacity>

                </View>
              )}
  
          </Formik>
    );
  }

解决方法

我在文档中看到他们从react添加了useEffect内的侦听器。你可以这样尝试吗？

import React,{ useEffect } from "react";
import { Keyboard,TextInput,StyleSheet } from "react-native";

const Example = () => {

  useEffect(() => {
    Keyboard.addListener("keyboardDidShow",_keyboardDidShow);
    Keyboard.addListener("keyboardDidHide",_keyboardDidHide);

    // cleanup function
    return () => {
      Keyboard.removeListener("keyboardDidShow",_keyboardDidShow);
      Keyboard.removeListener("keyboardDidHide",_keyboardDidHide);
    };
  },[]);

  const _keyboardDidShow = () => {
    alert("Keyboard Shown");
  };

  const _keyboardDidHide = () => {
    alert("Keyboard Hidden");
  };

  return <TextInput style={s.input} placeholder='Click here ...' onSubmitEditing={Keyboard.dismiss} />;
}

const s = StyleSheet.create({
   input:{
    margin:60,padding: 10,borderWidth: 0.5,borderRadius: 4,backgroundColor: "#fff"
   }
})

export default Example;