react-native - 如何在有条件的本地反应中使用导航
问题描述
我是本地人的新手。我很困惑如何在本机反应中实现导航,但条件是在检查表单验证成功后导航将起作用。这里我使用 react-native: 0.61.5
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class Apps extends Component{
state = {
username: '',
emailAddress: '',
password: '',
msgValidasi: '',
};
checkValidasi = () => {
let email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(this.state.username.trim() === '' && this.state.emailAddress.trim() === '' && this.state.password.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in the Form Below!' })
}else if(this.state.username.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in Your Username!' })
}else if(this.state.emailAddress.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in Your Email Address!' })
}else if(email.test(this.state.emailAddress) === false) {
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Incorrect Email Format!' })
}else if(this.state.password.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in Your Password!' })
}else if(this.state.password.length < 6){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Password At least 6 characters!' })
}else{
this.setState({ msgValidasi: 'success' })
}
render(){
return(
<View style={{alignItems: 'center'}} >
<LinearGradient
colors={['#8b9cea','#657eee','#637cee', '#485aee']}
start={{x: 0.0, y: 1.0}} end={{x: 1.0, y: 2.0}}
style={{width: 150, borderRadius: 20}} >
<TouchableWithoutFeedback onPress={this.checkValidasi}>
<Text style={{
textAlign: 'center',
padding: 10,
color: 'white',
fontWeight: 'bold'}} >Sign Up</Text>
</TouchableWithoutFeedback>
</LinearGradient>
</View>
)
}
}
当按下 onPress 键时,它将运行检查checkValidasi()
方法。如果成功,则页面将移至 for example.js
。我应该在哪里实现这个代码
() => this.props.navigation.navigate ('Home')
??
到目前为止,我只能进行验证检查,但检查成功时无法移动页面
解决方案
尝试这个
import React, {Component} from 'react';
import {Text, View} from 'react-native';
export default class Apps extends Component{
state = {
username: '',
emailAddress: '',
password: '',
msgValidasi: '',
};
checkValidasi = () => {
let email = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/ ;
if(this.state.username.trim() === '' && this.state.emailAddress.trim() === '' && this.state.password.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in the Form Below!' })
}else if(this.state.username.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in Your Username!' })
}else if(this.state.emailAddress.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in Your Email Address!' })
}else if(email.test(this.state.emailAddress) === false) {
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Incorrect Email Format!' })
}else if(this.state.password.trim() === ''){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Please Fill in Your Password!' })
}else if(this.state.password.length < 6){
this.refs.alertNull.open()
this.setState({ msgValidasi: 'Password At least 6 characters!' })
}else{
// this.setState({ msgValidasi: 'success' })
this.props.navigation.navigate ('Home')
}
render(){
return(
<View style={{alignItems: 'center'}} >
<LinearGradient
colors={['#8b9cea','#657eee','#637cee', '#485aee']}
start={{x: 0.0, y: 1.0}} end={{x: 1.0, y: 2.0}}
style={{width: 150, borderRadius: 20}} >
<TouchableWithoutFeedback onPress={this.checkValidasi}>
<Text style={{
textAlign: 'center',
padding: 10,
color: 'white',
fontWeight: 'bold'}} >Sign Up</Text>
</TouchableWithoutFeedback>
</LinearGradient>
</View>
)
}
}
推荐阅读
- ruby-on-rails - Rails 6:不允许的参数(多对多)
- python - Python:LSTM 模型和词嵌入
- swift - 使用 CIfilter 的误差扩散抖动图像
- laravel - 试图获取非对象的属性“名称”。模型关系不起作用
- python - 如何从字典键创建变量?
- javascript - Gatsby:事件侦听器未在 React useEffects 挂钩上卸载
- c# - 将 EfCore 延迟加载代理与 blazor 一起使用
- if-statement - 对多个 if 条件使用单个 else 语句
- javascript - 如何拆分字符串并在数组中组织?
- google-apps-script - 谷歌表格脚本定期检查 URL 的状态并相应地更新单元格