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

柯尔蒂

我是 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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native:如何在单击按钮时获取文本值?

来自分类Dev

如何在React Native中防止多次单击按钮?

来自分类Dev

如何在React Native中安装React Native Maps?

来自分类Dev

如何在React Native中优化图像

来自分类常见问题

如何在React Native中禁用旋转?

来自分类Dev

如何在React Native中渲染对象?

来自分类Dev

如何在React Native中显示图标?

来自分类Dev

如何在React Native中删除警告

来自分类Dev

如何在React Native中传递对象?

来自分类Dev

如何在React Native中刷新屏幕

来自分类Dev

如何在React Native中优化图像

来自分类Dev

如何在 React Native 中缩放图像?

来自分类Dev

在React Native中单击时如何使每个按钮更改颜色?

来自分类Dev

在React Native中单击按钮时如何渲染组件

来自分类常见问题

如何在React Native中设置TextInput的样式以输入密码

来自分类Dev

如何在React Native中验证TextInput值?

来自分类Dev

如何在React Native中添加按钮网格样式?

来自分类Dev

如何在React Native中突出显示单个按钮?

来自分类Dev

如何在 React Native 中呈现单选按钮的值?

来自分类Dev

如何在React Native Expo中使用按钮发送通知

来自分类Dev

如何在React Native中注册耳机按钮事件?

来自分类Dev

不确定如何在react-native中单击按钮来渲染此组件

来自分类Dev

如何在映射 React Native 时使用 setState

来自分类Dev

如何在React Native中处理<Text>中的长文本

来自分类Dev

如何在React Native中的WebView中给出拐角半径

来自分类Dev

如何在React Native中的Flatlist中获取行索引

来自分类Dev

如何在React Native中的对象中获取特定值?

来自分类Dev

如何在React Native iOS中调试链接错误?

来自分类Dev

如何在React Native的MapView中设置标记

Related 相关文章

  1. 1

    React Native:如何在单击按钮时获取文本值?

  2. 2

    如何在React Native中防止多次单击按钮?

  3. 3

    如何在React Native中安装React Native Maps?

  4. 4

    如何在React Native中优化图像

  5. 5

    如何在React Native中禁用旋转?

  6. 6

    如何在React Native中渲染对象?

  7. 7

    如何在React Native中显示图标?

  8. 8

    如何在React Native中删除警告

  9. 9

    如何在React Native中传递对象?

  10. 10

    如何在React Native中刷新屏幕

  11. 11

    如何在React Native中优化图像

  12. 12

    如何在 React Native 中缩放图像?

  13. 13

    在React Native中单击时如何使每个按钮更改颜色?

  14. 14

    在React Native中单击按钮时如何渲染组件

  15. 15

    如何在React Native中设置TextInput的样式以输入密码

  16. 16

    如何在React Native中验证TextInput值?

  17. 17

    如何在React Native中添加按钮网格样式?

  18. 18

    如何在React Native中突出显示单个按钮?

  19. 19

    如何在 React Native 中呈现单选按钮的值?

  20. 20

    如何在React Native Expo中使用按钮发送通知

  21. 21

    如何在React Native中注册耳机按钮事件?

  22. 22

    不确定如何在react-native中单击按钮来渲染此组件

  23. 23

    如何在映射 React Native 时使用 setState

  24. 24

    如何在React Native中处理<Text>中的长文本

  25. 25

    如何在React Native中的WebView中给出拐角半径

  26. 26

    如何在React Native中的Flatlist中获取行索引

  27. 27

    如何在React Native中的对象中获取特定值?

  28. 28

    如何在React Native iOS中调试链接错误?

  29. 29

    如何在React Native的MapView中设置标记

热门标签

归档