react native で ログインフォームを作る
import React, { Component } from 'react';
import {
AppRegistry,
Text,
Image,
View,
Button,
StyleSheet,
TextInput,
Linking,
Alert,
Navigator
} from 'react-native';
import t from 'tcomb-form-native';
const Form = t.form.Form;
const Email = t.subtype(t.Str, (email) => {
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return reg.test(email);
});
const LoginFields = t.struct({
username: Email,
password: t.String,
});
const options = {
fields: {
password: {
type: 'password',
placeholder: 'Password',
},
username: {
placeholder: 'e.g: abc@gmail.com',
error: 'Insert a valid email'
}
}
};
export default class Login extends Component {
_onSubmit() {
const value = this.refs.form.getValue();
if (value) {
console.log(value.password);
console.log(value.username);
}
}
render() {
return (
<View style={styles.containerView}>
<Form
ref="form"
type={LoginFields}
options={options}
/>
<Text style={{color: 'blue', marginBottom: 10}}
onPress={() => Linking.openURL('https://www.google.co.in')}>
Forgot Password?
</Text>
<Button
onPress={this._onSubmit.bind(this)}
title="Login"
style={styles.loginButton}
accessibilityLabel="Ok, Great!"
/>
</View>
);
}
};
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'
}
});