我是 react-native 的新手,按照文档我创建了一个简单的登录屏幕。现在我不知道如何在点击提交按钮时验证输入字段。以下是登录屏幕的代码。
import React, { Component } from 'react';
import {
AppRegistry,
Text,
Image,
View,
Button,
StyleSheet,
TextInput,
Linking,
Alert
} from 'react-native';
class LoginPage extends Component {
//On click of submit button alert will appear
_onSubmit() {
Alert.alert('Button has been pressed!');
}
render() {
return (
<View style={styles.containerView}>
<Text style={styles.loginText} >
Username or Email
</Text>
<TextInput style={styles.inputFields}
placeholder="e.g: [email protected]" />
<Text style={styles.loginText}>
Password
</Text>
<TextInput style={styles.inputFields}
placeholder="Password"
secureTextEntry={true} />
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<Button
onPress={this._onSubmit}
title="Login"
style={styles.loginButton}
accessibilityLabel="Ok, Great!"
/>
</View>
);
}
};
//Stylesheet for input fields
const styles= StyleSheet.create({
containerView: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ffebcd',
borderStyle: 'solid',
borderColor: '#000000'
},
loginText: {
fontSize: 20,
marginBottom: 10
},
inputFields: {
fontSize: 20,
borderStyle: 'solid',
borderColor: '#000000',
borderRadius: 30,
marginBottom: 10
},
loginButton: {
backgroundColor: '#34A853'
}
});
AppRegistry.registerComponent('AwesomeProject', () => LoginPage);
import React, { Component } from 'react';
import {
AppRegistry,
Text,
Image,
View,
Button,
StyleSheet,
TextInput,
Linking,
Alert
} from 'react-native';
class LoginPage extends Component {
state = {
username: null,
password: null
}
//On click of submit button alert will appear
_onSubmit() {
const { username, password } = this.state;
Alert.alert('Button has been pressed!');
}
render() {
return (
<View style={styles.containerView}>
<Text style={styles.loginText} >
Username or Email
</Text>
<TextInput style={styles.inputFields}
onChangeText={value => this.setState({ username: value })}
placeholder="e.g: [email protected]" />
<Text style={styles.loginText}>
Password
</Text>
<TextInput style={styles.inputFields}
onChangeText={value => this.setState({ password: value })}
placeholder="Password"
secureTextEntry={true} />
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<Button
onPress={this._onSubmit}
title="Login"
style={styles.loginButton}
accessibilityLabel="Ok, Great!"
/>
</View>
);
}
};
//Stylesheet for input fields
const styles= StyleSheet.create({
containerView: {
flex: 1,
justifyContent: 'center',
backgroundColor: '#ffebcd',
borderStyle: 'solid',
borderColor: '#000000'
},
loginText: {
fontSize: 20,
marginBottom: 10
},
inputFields: {
fontSize: 20,
borderStyle: 'solid',
borderColor: '#000000',
borderRadius: 30,
marginBottom: 10
},
loginButton: {
backgroundColor: '#34A853'
}
});
AppRegistry.registerComponent('AwesomeProject', () => LoginPage);
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句