React native 在react native中导航时检测键盘打开模式
在react本机应用程序的注册过程中,我必须从电子邮件屏幕导航到密码屏幕等。当我从电子邮件屏幕单击下一步时,当我转到密码屏幕时,键盘仍然打开。导航到新屏幕时,如何检测键盘是否打开 一旦进入密码屏幕,键盘侦听器就会正常工作。这是我的密码。唯一的问题是,当屏幕加载时,我无法检测键盘状态React native 在react native中导航时检测键盘打开模式,react-native,React Native,在react本机应用程序的注册过程中,我必须从电子邮件屏幕导航到密码屏幕等。当我从电子邮件屏幕单击下一步时,当我转到密码屏幕时,键盘仍然打开。导航到新屏幕时,如何检测键盘是否打开 一旦进入密码屏幕,键盘侦听器就会正常工作。这是我的密码。唯一的问题是,当屏幕加载时,我无法检测键盘状态 constructor(props) { super(props); this.state = { email: { val
constructor(props) {
super(props);
this.state = {
email: {
value: "",
valid: false,
touched: false,
validationRules: {
isEmail: true
}
},
headerStyles: {
marginTop: 30,
marginBottom: 70,
marginLeft: 20
},
buttonTouched: false,
emailAlreadyTaken: false
}
}
// componentDidMount
componentDidMount() {
this.keyboardDidShowListener = Keyboard.addListener("keyboardDidShow", this._keyboardDidShow);
this.keyboardDidHideListener = Keyboard.addListener("keyboardDidHide", this._keyboardDidHide);
}
// componentWillMount
componentWillUnmount() {
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
// If the keyboard is visible
_keyboardDidShow = () => {
this.setState({
headerStyles: {
marginTop: 10,
marginBottom: 30,
marginLeft: 20
}
});
}
// If the keyboard is not visible
_keyboardDidHide = () => {
this.setState({
headerStyles: {
marginTop: 30,
marginBottom: 70,
marginLeft: 20
}
});
}
// navigation options
static navigationOptions = () => {
return {
headerTitle: null,
headerStyle: {
backgroundColor: "white"
}
};
};
当我导航到新屏幕时,如何检测键盘状态
// If the keyboard is visible
_keyboardDidShow = () => {
this.setState({
keyBoardIsOn: true, // SET TO FALSE KEYBOARD SHOWN
headerStyles: {
marginTop: 10,
marginBottom: 30,
marginLeft: 20
}
});
}
// If the keyboard is not visible
_keyboardDidHide = () => {
this.setState({
keyBoardIsOn: false, // SET TO FALSE KEYBOARD HIDDEN
headerStyles: {
marginTop: 30,
marginBottom: 70,
marginLeft: 20
}
});
}
_navigate = () = {
if(this.state.keyBoardIsOn) {
// Do Stuff
}
}