React Native：我按下文本输入并出现键盘并在使用 Keyboard.addListener 时自动关闭一次

Question

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

在第一次初始关闭键盘后 - 注释掉了 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%", height:input_height, borderColor: "#1d3557", borderWidth:1, margin:"2%", paddingLeft:"3%", backgroundColor:"white", borderColor:"grey", borderRadius:8}}
                               placeholder='password' onChangeText={props.handleChange('password')} value={props.values.password} />
                

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

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

Answer 1

我在文档中看到他们从 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;

Answer 2

如果这不起作用，

Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);

这样做

const a = Keyboard.removeListener("keyboardDidShow", _keyboardDidShow);
const b = Keyboard.removeListener("keyboardDidHide", _keyboardDidHide);

return a.remove(),b.remove();