如何解决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;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。