如何在React Native中单击提交按钮来验证电子邮件和密码？

Question

I'm new to react-native and by following the docs I have created a simple login screen. Now I'm not getting how to validate input fields on click of submit button. Below is the code for login screen.

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: abc@example.com" />
        <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);

Answer 1

basically working with forms in react native is somewhat challenging. If you want some mature solution I would suggest to take a look at tcomb-form-native

If you want to keep things simple, then you have to store references to your inputs and then (for example on onSubmitEditing ) you can get entered value and validate it by yourself.

Answer 2

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: abc@example.com" />
        <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);

Answer 3

您可以使用this.state.username进行验证

<TextField label={'Username'} onChangeText={(username)=>this.setState({username})} value={this.state.username} />